D3 V4 设置初始缩放级别

D3 V4 setting initial zoom level

本文关键字：缩放 V4 设置 D3      更新时间：2023-09-26

我刚刚开始使用 D3 V4，在平移和缩放功能工作时遇到了问题。问题是我希望初始比例值大于 1，所以我使用

zoom.scaleTo(svg, 2);

但是，一旦我平移或缩放，比例就会重置回 1。

下面是 JSFiddle 上此行为的示例，我做错了什么？

JSFiddle

问题是：

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

您正在将组元素而不是 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/

相关文章：