D3 V4设置初始缩放级别

Question

我刚刚开始使用D3 V4,但我无法使用平移和缩放功能.问题是我希望初始比例值大于1,所以我使用它来设置它

zoom.scaleTo(svg, 2);

但是,只要我平移或缩放,刻度就会重置为1.

这是JSFiddle上这种行为的一个例子,我做错了什么？

的jsfiddle

Answer 1

这是问题所在:

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

您正在将group元素而不是svg元素分配给变量svg.

这zoom是正确应用于svg元素,但是当你调用时,zoom.scaleTo(svg, 2)你正在缩放组元素,而不是svg元素.

这可以通过首先创建svg元素并将其分配给svg变量,然后再创建和分配group元素来解决.

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/