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.