D3.js D3力布局：使拖动时平移（缩放）更平滑

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

我有一个使用

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 + ")");
}

---

实现平移，但我发现它真的很“快速”，一点也不平滑，以至于我猜它会阻止人们尝试拖动功能。有人知道为什么会发生这种情况和/或知道如何解决吗

问题在于，

d3.behavior.zoom

检索相对于单击项目的容器元素的当前鼠标位置，并且您正在移动容器元素！所以相对位置是不断变化的，所以你看到的是抖动效应

您可能希望移动背景

，使其成为

元素的直接子元素。这实现了两件事：

该位置现在将相对于未移动的

容器

当前，缩放或平移时正在移动

，因此可缩放区域将发生变化，视口的某些部分不再可缩放。将背景

放在同一位置也可以解决此问题

---

啊哈，我也在向前移动；让他们“独立”似乎是可行的：-）非常感谢你解决了这个问题。