D3 v4: Reset Zoom Status

Question

I have an SVG that can be increased, as well as a reset button. I am resizing with

zoom.transform(selection, d3.zoomIdentity)

This works as expected and resets to SVG. But if I zoom in again, it will zoom in to the last state. For instance. I scroll, click the "reset" button, and then zoom out → the SVG image is enlarged. How can I reset to change the internal state of the zoom of an object zoom? Tried different solutions and none of them work.

Here is the full scaling code

//zoom cannot be done on the <svg> directly
var container = d3.select("#g5063")

var zoom = d3.zoom().
    scaleExtent([0.7, 8]).
    on("zoom", () => {       
        container.attr("transform", d3.event.transform)                
    })

$("#reset-zoom-button").click(() => {
    zoom.transform(container, d3.zoomIdentity);
})

var svg = d3.select("#svg").call(zoom)

Answer 1

Also set the scale to reset

$("#reset-zoom-button").click(() => {
    zoom.transform(container, d3.zoomIdentity.scale(1) );

})

Answer 2

SVG. , .

, , . reset <svg>, <g> .

svg.call(zoom.transform, d3.zoomIdentity.scale(1));

zoom.transform(d3.select(chartContainer).select('svg.view'), d3.zoomIdentity.scale(1)); .

Answer 3

gist, , , , . , .

What you are missing is that you need to communicate zoomIdentitywhat the initial states should be x, yand k. The state xand is yset using .translate(x,y), and the scale is set using .scale(k). The code below should work.

$("#reset-zoom-button").click(() => {
  zoom.transform(container, d3.zoomIdentity.translate(0,0).scale(0.7));
})

From what I can say, translating zoomIdentityto 0.0 should always reset svg to the original position settings, but you might have to play around with it.

Let me know if this works for you.