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> 在同一个地方也解决了这个问题。