d3.behavior.zoom jitterers, हिलाता है, कूदता है, और

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 तत्व के परिवर्तन से अस्थिरता आ रही है। जिस समाधान के साथ मैं समाप्त हुआ, वह ज़ूम व्यवहार और तत्व सामग्री को विशेष रूप से ज़ूम/पैन रूपांतरण प्राप्त करने के लिए एक और "जी" तत्व डालना है:

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