d3.behavior.zoom拖动时抖动，抖动，跳跃和跳动

问题描述

我使用d3.behavior.zoom在树布局上实现平移和缩放，但它展现了一个我会描述为弹跳或数值不稳定的行为。当你开始拖动时，显示器将不可避免地跳动直到它刚好消失。代码如下：

  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 +））; 
}）
）; 
  

有没有更好的方法来设置不会引起这种干扰的转换？更仔细地看一下，不稳定性来自于svg元素的变换，它在运动过程中被应用到鼠标的位置。我最终得到的解决方案是在具有缩放行为的元素和元素内容之间插入另一个g元素，以接收缩放/平移变换：

  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）... 
  

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?

解决方案

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拖动时抖动，抖动，跳跃和跳动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！