Question

我正在尝试将d3图表加载时居中。所以我跑

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

//... then later

g.call(zoom.transform, center);

它实际上并不是居中，而是现在缩放。但规模有效。问题是，当我滚动到放大或缩小时，它从1而不是0.5开始。所以它跳了起来。

这是我的jsbin。

Answer 1

您正在将您的活动应用于其他对象（g），然后设置缩放设置（svg）。由于缩放事件是针对应用它的元素引用的，因此d3现在不关于您的初始居中。来自docs：

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

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

完整代码：

＆＃13;

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);

＆＃13;

<!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>

＆＃13;

在编程变焦后使用鼠标时，d3.js平移和缩放跳跃

1 个答案: