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

实现平移，但我觉得它真的是“skittery”，而不是很流畅可言，到这种地步，我猜它会阻止人们尝试拖动功能。有没有人知道为什么发生这种情况和/或如何解决它的想法？

Answer 1

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

您可能想要移动背景<rect>，以便它是<svg>元素的直接子元素。这实现了两件事：

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