9

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

来实现平移，但我发现它真的很“飘忽”，而且根本不是很平滑，以至于我猜它会阻止人们尝试拖动功能。有没有人知道为什么会发生这种情况和/或如何解决它的想法？

4

1 回答 1

18

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

您可能想要移动背景<rect>，使其成为元素的直接子<svg>元素。这实现了两件事：

  1. 该位置现在将相对于<svg>不会移动的容器。
  2. 目前，您在<rect>缩放或平移时正在移动 ，因此可缩放区域会发生变化，并且视口的某些部分不再可缩放。将背景<rect>放在同一个地方也可以解决这个问题。
于 2012-10-01T16:07:38.430 回答