d3.js – D3力布局：使拖动平移(缩放)更平滑

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

实现平移,但我发现它真的是“闪光”并且根本不是很平滑,我猜它会阻止人们尝试拖动功能.有没有人知道为什么会发生这种情况和/或如何解决这个问题？

解决方法

问题是d3.behavior.zoom检索相对于单击项的容器元素的当前鼠标位置,并且您正在移动容器元素！所以相对位置不断变化,因此你看到的抖动效应.

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

>该职位现在将相对于< svg>容器,不动.>目前,您正在移动< rect>缩放或平移时,可缩放区域会发生变化,视口的某些部分不再可缩放.拥有背景< rect>在同一个地方也解决了这个问题.