D3 manually zoom in, how to set up translation to zoom

Question

I need to make the transition manually, since I know about d3 scaling, the zoom will not listen to my manual scaling, so after manually scaling, when I use the mouse to drag and drop or the mouse wheel to scroll, the d3 scale will start the event from the previous position (translate) and the scale values ​​that are stored in d3 are so terrible for my card. Therefore, I need to adjust the translation and zoom of the zoom after my manual zoom, and I can set the zoom scale, but I do not know the value for setting the zoom translation.

       g.transition()
        .duration(1000)
        .attr("transform", "translate(" + (window_width / 2 + translateX) + "," + (window_height / 2 ) + ")scale(" + zoomLevel + ")translate(" + (-x + 10) + "," + -y + ")")
        .each("end", function () {
            if (zoomLevel > 1) {
                $("#zoom_control").show();
                showCenteredTextInCircle();
                // zoom.scale(zoomLevel);
                // zoom.translate([x*zoomLevel, y*zoomLevel]);
            }
        });

This code is a link from d3-zoom-example

Does anyone know the correct translation translation value after my manual transition? Thank!!!

Answer 1

. , , :

var zoom = d3.behavior.zoom()
             .translate([0, 0])
             .scale(1).scaleExtent([1, 3])
             .on("zoom", zoomed);

. , 1 . , :

var zoom = d3.behavior.zoom();

, :

var scale=zoom.scale(); var position=zoom.translate();

- , :

function interpolateZoom(translate, scale) {

                return d3.transition().duration(150).tween("zoom", function() {
                    var iTranslate = d3.interpolate(zoom.translate(), translate),
                        iScale = d3.interpolate(zoom.scale(), scale);

                    return function(t) {
                        zoom.scale(iScale(t)).translate(iTranslate(t));
                    };
                });
            };

zoomed - , , , :

function zoomed() {
      g.transition().duration(1000)
        .attr("transform", "translate(" + (window_width / 2 + translateX) + "," + (window_height / 2 ) + ")scale(" + zoomLevel + ")translate(" + (-x + 10) + "," + -y + ")")
        .each("end", function () {
            if (zoomLevel > 1) {
                $("#zoom_control").show();
                showCenteredTextInCircle();
                interpolateZoom([x*zoomLevel, y*zoomLevel],zoomLevel);
                // zoom.scale(zoomLevel);
                // zoom.translate([x*zoomLevel, y*zoomLevel]);
            }
        });
    }

, .