Geek Answers Handbook

D3 V4 set the initial zoom level

I just started using D3 V4, and I have problems with the pan and zoom. The problem is that I want the initial value of the scale to be something more than 1, so I set this with

zoom.scaleTo(svg, 2);

However, as soon as I pan or zoom in, it resets to 1.

Here is an example of this behavior on JSFiddle, what am I doing wrong?

Jsfiddle

+4
source share
1 answer

Here's the problem:

var svg = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 600)
  .call(zoom)
  .append("g");

You assign a group element instead of an svg element to a variable svg.

zoomapplies correctly to the svg element, but then when you call zoom.scaleTo(svg, 2), you zoom in on the group element, not the svg element.

, svg svg, .

var svg = d3.select("body").append("svg")
    .attr("width", 600)
    .attr("height", 600)
    .call(zoom);

var mainContainer = svg.append("g");

JSFiddle: https://jsfiddle.net/skgktrcu/2/

+9

More articles:


All Articles