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")...