d3.js程序化缩放后，使用鼠标进行平移和缩放时会出现跳跃问题

Question

d3.js程序化缩放后，使用鼠标进行平移和缩放时会出现跳跃问题

5

我将翻译如下：

我试图在d3图形加载时居中它。所以我运行

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

//... then later

g.call(zoom.transform, center);

实际上它并没有居中，现在只是缩放。但是缩放是有效的。问题是，当我滚动缩放时，它从1开始而不是0.5。所以会跳动。

这是我的jsbin。

- Tyler Graf

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mark · Accepted Answer

您将事件应用于一个不同的对象（g），而不是设置缩放的对象（svg）。由于缩放事件是针对应用它的元素引用的，因此 d3 对您的初始居中没有了解。从文档中可以得知：

缩放行为将缩放状态存储在应用缩放行为的元素上，而不是存储在缩放行为本身上。这是因为缩放行为可以同时应用于多个元素，并且每个元素都可以独立缩放。缩放状态可以通过用户交互或通过 zoom.transform 编程方式进行更改。

将您的调用更改为 svg.call(zoom.transform, center); 可以解决您的问题。

完整代码:

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    transform = d3.zoomIdentity;

var points = d3.range(2000).map(phyllotaxis(10));

var zoom = d3.zoom()
    .scaleExtent([1 / 2, 8])
    .on("zoom", zoomed);

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

g.selectAll("circle")
    .data(points)
  .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 2.5)
    .call(d3.drag()
        .on("drag", dragged));

svg.call(zoom);

function zoomed() {
  g.attr("transform", d3.event.transform);
}

function center() {
  return d3.zoomIdentity
        .scale(0.5);
}

function dragged(d) {
  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}

function phyllotaxis(radius) {
  var theta = Math.PI * (3 - Math.sqrt(5));
  return function(i) {
    var r = radius * Math.sqrt(i), a = theta * i;
    return {
      x: width / 2 + r * Math.cos(a),
      y: height / 2 + r * Math.sin(a)
    };
  };
}

svg.call(zoom.transform, center);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
</body>
</html>