这是一个演示:http://jsbin.com/okUxAvE/18/edit?js,output
我正在使用 d3.behavior.zoom()
(它也进行平移)。我只想要平移而不是实际缩放。现在,当你拖动树的一部分时,重新绘制是很奇怪和“跳跃”的(因此演示 - 看到它就明白我的意思)。我假设我与点击事件有某种冲突(点击节点展开它们)。但是,我看不出问题是什么,更不用说如何解决了。此外,我希望用户也能够通过拖动背景进行平移,而不仅仅是定位在树上方。
所以这里其实有两个问题:
- 我在缩放实现方面做错了什么,我应该如何修复它?和
- 如何使整个 Canvas “可平移”?
最佳答案
缩放行为决定了鼠标相对于它附加到的元素的坐标以找到平移。您已经修改了缩放行为附加到的元素的位置,因此修改了用于转换的相对坐标。因此你会看到这种抖动。解决方案是将缩放行为附加到另一个元素,例如到 SVG 本身。这也解决了 2。
通过将缩放行为附加到 SVG 元素本身,可以使整个 Canvas 可拖动。然后您只需要修改缩放处理程序以在设置翻译时考虑边距。
要修复抖动并使整个 Canvas 可拖动,只需在创建 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 .
关于javascript - 如何在使用 d3.behavior.zoom() 平移时删除 "jumpiness",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20072044/