d3.behavior.zoom 拖动时抖动、抖动、跳跃和弹跳 [英] d3.behavior.zoom jitters, shakes, jumps, and bounces when dragging
问题描述
我正在使用 d3.behavior.zoom 在树布局上实现平移和缩放,但它表现出的行为我将描述为弹跳或数值不稳定.当您开始拖动时,显示会莫名其妙地跳来跳去,直到它消失.代码如下所示:
I am using the d3.behavior.zoom to implement panning and zooming on a tree layout, but it is exhibiting a behavior I would describe as bouncing or numeric instability. When you start to drag, the display will inexplicably jump around until it just disappears. The code looks like this:
var svg = target.append ("g");
...
svg.call (d3.behavior.zoom()
.translate ([0, 0])
.scale (1.0)
.scaleExtent([0.5, 2.0])
.on("zoom", function() {
svg.attr("transform","translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ") scale(" + d3.event.scale + ")");
})
);
是否有更好的方法来设置不会造成此类干扰的转换?
Is there a better way to set the transformation that doesn't cause this type of interference?
推荐答案
仔细观察后,不稳定来自 svg 元素在移动过程中应用于鼠标位置的变换.我最终得到的解决方案是在具有缩放行为的元素和专门接收缩放/平移变换的元素内容之间插入另一个g"元素:
After looking a bit more closely, the instability is coming from the svg element's transformation being applied to the mouse location during movement. The solution I ended up with is to insert another "g" element between the one with the zoom behavior and the element content specifically to receive the zoom/pan transformation:
var svg = target.append ("g");
var child = svg.append ("g");
...
svg.call (d3.behavior.zoom()
.translate ([0, 0])
.scale (1.0)
.scaleExtent([0.5, 2.0])
.on("zoom", function() {
child.attr("transform","translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ") scale(" + d3.event.scale + ")");
})
);
...
child.append("line")...
这篇关于d3.behavior.zoom 拖动时抖动、抖动、跳跃和弹跳的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!