CODEWITHSUNDEEP
javascriptd3.jssvgzooming
ierqjirj13r109r1
ierqjirj13r109r1

Reputation: 161

D3 v4: Reset zoom state

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. E.g. 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)

Upvotes: 16

Views: 7173

Answers (5)

shenyu
shenyu

Reputation: 39

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.

Upvotes: 3

Vadakkumpadath
Vadakkumpadath

Reputation: 1485

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>

Upvotes: 2

Austin A
Austin A

Reputation: 3148

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.

Upvotes: 2

Gabriel Ferreira
Gabriel Ferreira

Reputation: 11

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.

Upvotes: 1

baklazan
baklazan

Reputation: 819

Also set scale in the reset

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

})

Upvotes: 0

Related Questions