Question

以下是演示：http://jsbin.com/okUxAvE/18/edit?js,output

我正在使用d3.behavior.zoom()（也可以进行平移）。我只想要平移而没有实际缩放。现在，当你拖动树的一部分时，重绘是非常奇怪和“跳跃”（因此演示 - 看到它是知道我的意思）。我假设我与点击事件有某种冲突（点击节点会扩展它们）。但是，我看不出问题是什么，更不用说如何修复它了。此外，我希望用户能够通过拖动背景进行平移，而不仅仅是通过在树上方定位。

所以实际上这里有两个问题：

我在缩放实现方面做错了什么？如何修复它？和
我可以做些什么来使整个画布“pannable”？

Answer 1

缩放行为确定鼠标相对于其附加元素的坐标以查找翻译。您正在修改附加缩放行为的元素的位置，因此修改用于变换的相对坐标。因此，你会看到这种抖动。解决方案是将缩放行为附加到另一个元素，例如到SVG本身。这也解决了2。
通过将缩放行为附加到SVG元素本身，可以使整个画布可拖动。然后，您只需要修改缩放处理程序，以便在设置翻译时考虑边距。

要修复抖动并使整个画布可拖动，只需在创建SVG时更改行的顺序：

var svg = d3.select("#map").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + margin.top + margin.bottom)
            .call(pan)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

然后，要修复平移偏移，请修改缩放处理程序：

function panned() {
  svg.attr("transform",
     "translate(" + (d3.event.translate[0] + margin.left) + "," +
                    (d3.event.translate[1] + margin.top) + ")");
}

完整示例here。

如何使用d3.behavior.zoom（）在平移时删除“跳跃”

1 个答案: