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) 时，您正在缩放 group 元素，而不是 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/