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 works as expected and resets the zoom on the SVG. But if I zoom again, it zooms back to the last state. Eg I scroll in, press "reset" button and then zoom out -> SVG is zoomed in. How can I reset the internal zoom state of the zoom object? Tried out different solutions and none of them works.

Here the full zoom 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

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 2

Also set scale in the reset

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

})

Answer 3

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 4

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 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>