Skip to content Skip to sidebar Skip to footer
Home / D3.js / Javascript

After Zoom Transition, The "camera" Snaps Back To Where It Was Before Zoom

Post a Comment
Though I have a JS fiddle link here, it doesn't work in fiddle.

Solution 1:

You do have a zoom object when you create d3.behavior.zoom here: svg.call(d3.behavior.zoom().on('zoom', redraw).

As you have already found out, you have to reset it while transitioning back to center:

var zoom = d3.behavior.zoom()
        .on("zoom", redraw);

function center() {
   var theGraph = d3.select("#container");
   zoom.translate([0, 0]); // Resetting translate
   zoom.scale(1);          // Resetting scale
   theGraph.transition()
       .duration(750)
       .attr("transform", "translate(0, 0)scale(1)");
}

// ...
svg.call(zoom);

Working demo: http://jsfiddle.net/EM2c6/2/

Sidenote: It wasn't working in jsFiddle previously because of this:

d3.select("#UI")
  .append("button")
  .attr("type","button")
  .attr("onclick", "center()") // <- This is not defined on the global scope
  .html("Center");

Using D3's click handler and not referencing to center function via a string fixed that problem:

d3.select("#UI")
  .append("button")
  .attr("type","button")
  .on("click",center)
  .html("Center");

You may like these posts

Post a Comment for "After Zoom Transition, The "camera" Snaps Back To Where It Was Before Zoom"