如何使用d3.behavior.zoom()在平移时删除"跳跃"

Question

这是一个演示:http://jsbin.com/okUxAvE/18/edit？js,output

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

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

1. 我在缩放实现方面做错了什么以及如何修复它？和
2. 我可以做些什么来使整个画布"可以消除"？

Answer 1

1. 缩放行为确定鼠标相对于其附加元素的坐标以查找转换.您正在修改附加缩放行为的元素的位置,因此修改用于变换的相对坐标.因此,你会看到这种抖动.解决方案是将缩放行为附加到另一个元素,例如附加到SVG本身.这也解决了2.

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) + ")");
}

在这里完成示例.