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>元素的直接子元素。这实现了两件事：

该位置现在将相对于<svg>容器，该容器未移动。
目前，当您缩放或平移时，您正在移动<rect>，因此可缩放区域会发生变化，视口的某些部分不再可缩放。将背景<rect>放在同一位置也可以解决这个问题。

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

1 个答案: