D3 强制布局：使拖动（缩放）上的平移更平滑

Question

我有一个 d3.js 静态力布局图，它可以变得相当大（有时部分被剪裁），所以我想让用户通过拖动来平移整个图。我认为我不需要拖动单个节点，我有一种感觉会让人感到困惑，但希望能够显示被 svg 边界裁剪的图形部分。

我在http://bl.ocks.org/3811811 有一个最小的例子，它使用了

visF.append("rect")
 .attr("class", "background")
 .attr("width", width)
 .attr("height", height)
 .call(d3.behavior.zoom().on("zoom", redrawVisF));
function redrawVisF () {
  visF.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}

实现平移，但我发现它真的很“飘忽”而且一点也不流畅，以至于我猜它会阻止人们尝试拖动功能。有没有人知道为什么会发生这种情况和/或如何解决它的想法？

Answer 1

问题在于d3.behavior.zoom 检索当前鼠标相对于被点击项目的容器元素的位置，而您正在移动容器元素！所以相对位置是不断变化的，因此你会看到抖动效果。

您可能想要移动背景<rect>，使其成为<svg> 元素的直接子元素。这实现了两件事：

1. 该位置现在将相对于<svg> 容器，它不会移动。
2. 目前，您在缩放或平移时移动<rect>，因此可缩放区域发生变化，并且视口的某些部分不再可缩放。将背景 <rect> 放在同一位置也可以解决此问题。