CODEWITHSUNDEEP
javascriptjqueryhtmlsvgd3.js
John
John

Reputation: 3115

Zooming in using D3

How would I zoom in to a certain point on an svg at a certain point and then zoom out to the whole svg. There are only two states, I don't require mouse scroll zoom or a zoom in, zoom out button.

I've looked up and found .zoom in d3 documentation, but am unsure of how to apply in my circumstances. I've only seen scroll zooms that are too complicated.

Upvotes: 0

Views: 810

Answers (1)

Adam Pearce
Adam Pearce

Reputation: 9293

Checkout how mouse zooming is typically implemented:

var svg = d3.select("#svg")
    .call(d3.behavior.zoom().on("zoom", redraw))

function redraw() {
  console.log("translate: ", d3.event.translate, "scale:", d3.event.scale);
  svg.attr("transform",
      "translate(" + d3.event.translate + ")"
      + " scale(" + d3.event.scale + ")");
}

Scrolling will spit out something like:

translate:  [-66.3438, -36.359] scale: 1.1809

To avoid implementing a scroll zoom, you can directly modify the transformation attribute of your svg just like the redraw function does. Just use your own values instead of d3.event.translate. For example:

svg.attr("transform",
      "translate(" + [0,0] + ")"
      + " scale(" + 2 + ")");

will zoom 2x to the center of the svg. Using 5 instead of 2 would zoom in 5x.

The click to zoom map example has good demonstration of how to do this

Upvotes: 1

Related Questions