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>放在同一个地方也可以解决这个问题.