javascript - 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 变量，然后再创建和分配组元素来解决。

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/