D3 v4: Reset zoom state

Question

I have a SVG which can be zoomed and also a \"reset\" button. I\'m resetting the zoom with

zoom.transform(selection, d3.zoomIdentity)

This wor

Answer 1

This gist, which points to this working sample, ended up pointing me to the solution at least for my situation. As far as I can tell, it should fix your issue too.

What you're missing is that you need to tell zoomIdentity what the initial x, y, and k states should be. The x and y state is set 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 tell, translating the zoomIdentity to 0,0 should always reset the svg to the initial settings position settings, but it's possible you'll have to play around with this.

Let me know if this works for you.

Answer 2

This works as expected and resets the zoom on the SVG. But if I zoom again, it zooms back to the last state.

I have the same problem, after a quick research I discovered. You cant apply zoom and reset zoom to <svg>, you need to append <g> and apply zoom there.

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

Changed to zoom.transform(d3.select(chartContainer).select('svg.view'), d3.zoomIdentity.scale(1)); it works for me.

Answer 3

Also set scale in the reset

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

})

Answer 4

I meet the same problem using

this.svg.selectAll('g').call(this.zoom.transform, d3.zoomIdentity.scale(1));

and I change to

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

soloved the problem.

I think the _zoom will be stored in the svg level also.

Answer 5

I ended up with the same issue and solved it by changing to the following line.

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

Here is the complete 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(() => {
    svg.call(zoom.transform, d3.zoomIdentity.scale(1));
})

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

Here is testable script.

//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(() => {
    svg.call(zoom.transform, d3.zoomIdentity.translate(250, 100).scale(1))
})

var svg = d3.select("#svg").call(zoom)
svg.call(zoom.transform, d3.zoomIdentity.translate(250, 100).scale(1))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="svg" width="500" height="200">
  <g id="g5063">
    <polyline
       fill="none"
       stroke="#0074d9"
       stroke-width="3"
       points="
         0,120
         20,60
         40,80
         60,20"/>
  </g>
</svg>
<button id="reset-zoom-button">Reset</button>