How to store the programmitc zoom for mouse zoom not to start at 0,0 scale 1 again

I have a d3 v4 script which draws a windrose / pie chart type graphic which is tweened into to the canvas from x:0, y:0 to the middle of the canvas.

When a User zooms that windorose catapults back to 0,0 and scale 1. How can I make sure the zooming isn’t catapulting the windrose back to 0 again.

Starts like this.

// Zoom Behavior V4.
var zoom = d3.zoom().scaleExtent([0.5, 8]).on( “zoom”, zoomed );

This is the zooming base:

 var svg = d3.select("#group_canvas").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate( 0, 0 )scale(1,1)");

This is the zooming target:

// Container für Zooming
var cont = svg.append("g");

Then the cont is zoomed programmatically and the human interaction zoom is activated on svg:

 function applyZoom() {
        // Zoome die Fläche
    
          // .transition().duration(2000)
          // .call(zoom.translateTo, width/2, height/2);
          cont
          .transition().duration(2000)
          .tween("attr:transform", function() {
            //interpolate from start to end state
            var i = d3.interpolateString("scale(1)translate(0,0)", "scale("+scaleZoom+")translate("+(width/2)/scaleZoom+","+(height/2)/scaleZoom+")");
            return function(t) { 
              cont.attr("transform", i(t)); 
            };
          });
          
          // Call Zoom Behavior.
          svg.call(zoom);
          
        }

And finally this is the zoomed() function declared in the first line for the zoom behavior:

// Funktion die alles Zoomt. 
function zoomed() {
    // Diese Funktkion transformiert und skaliert alles gleichzeitig, welches den Effekt eines Zooms nachahmt.
var transform = d3.event.transform;

cont.attr('transform', transform.toString());

}