D3力布局：在拖动使锅（变焦）更顺畅(D3 force layout: making pan on

我有一个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 + ")");
}

实现平移，但我觉得它真的是“skittery”，而不是很流畅可言，在那里我猜它会阻止人们都试图拖动功能点。 有没有人有一个线索，为什么发生这种情况和/或如何解决它的想法？

Answer 1:

问题是， d3.behavior.zoom获取当前页相对于点击物品的容器元素鼠标的位置，而你正在移动的容器元素！ 因此，相对位置是不断变化的，因此，您所看到的抖动效果。

你可能想移动的背景<rect> ，这样它的一个直接子<svg>元素。 这实现了两件事情：

1. 的位置现在将相对于<svg>容器，其是不动的。
2. 目前，正在移动的<rect>当你缩放或平移，因此可缩放的面积变化和视口的某些部分不再缩放。 具有背景<rect>在同一个地方修复了这个问题了。

文章来源: D3 force layout: making pan on drag (zoom) smoother