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

Question

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

是否有更好的方法来设置不会导致此类干扰的转换？

Answer 1

在仔细观察之后，不稳定性来自于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")...