d3.js क्या मुझे बाहर निकलने/निकालने पर ईवेंट श्रोता को अलग करना चाहिए?

Question

मेरे पास कुछ कोड है जो टूलटिप्स प्रदर्शित करने के लिए एसवीजी सर्कल में माउसओवर इवेंट हैंडलर जोड़ता है। क्या मैं सर्कल तत्वों को हटाते समय इन हैंडलर को हटा/अनबिंड करना चाहिए? मुझे नहीं पता कि ये हैंडलर svg ऑब्जेक्ट से जुड़े हुए हैं और मुझे डर है कि यह छाया डोम या मेमोरी लीक का कारण बन सकता है। नीचे दिए गए कोड देखें:

circles.enter().append("svg:circle") 
    .on("mouseenter", function(d) { 
     // show tooltip 
    }); 
circles.exit() 
    .on("mouseenter", null) // necessary? 
    .remove(); 

Answer 1

मुझे लगता है कि आप पहले से ही अपने जवाब है, लेकिन मैं तुम्हें कैसे पता चलता है कि यह सच है, कम से कम नवीनतम क्रोम में में दिलचस्पी थी।

यह section of the D3 code कि डोम नोड्स को दूर करता है:

d3_selectionPrototype.remove = function() { 
    return this.each(function() { 
     var parent = this.parentNode; 
     if (parent) parent.removeChild(this); 
    }); 
    }; 

तो जैसा कि आप इसे ब्राउज़र के आधार पर है कोई भी संबद्ध श्रोताओं की सफाई करने के लिए देख सकते हैं।

var circles = svg.selectAll("circle") 
    .data(data, function(d) { return d.id; }); 

    circles.exit().remove(); 

    circles.enter().append("circle") 
    .attr("id", function(d) { return d.id; }) 
    .attr("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 
    .attr({ r: 5, fill: 'blue' }) 
    .on("mouseenter", function(d) { console.log('mouse enter') });  

लाइव यहाँ संस्करण:

मैं डी 3 के साथ जोड़ने/वृत्त नोड्स के बहुत सारे को दूर करने का एक सरल तनाव परीक्षण बनाई नवीनतम क्रोम

ओपन के साथ ऊपर http://bl.ocks.org/explunit/6413685

1. ओपन डेवलपर टूल्स
2. टाइमलाइन टैब पर क्लिक करें
3. पुन: क्लिक करें नीचे
4. पर कॉर्ड बटन यह कुछ मिनट तक चलने दें, फिर बटन क्लिक फिर से शीर्ष समय ध्यान में रखते हुए रिकॉर्डिंग
5. खींचें चयनकर्ता को रोकने के लिए sawtooth पैटर्न

कचरा संग्रहण के कई कवर करने के लिए आप देखेंगे कि डोम नोड कचरा संग्रह गणना घटना श्रोता कचरा संग्रह गणना के अनुरूप है। वास्तव में, तुम सच में उन्हें अलग नीचे स्क्रीनशॉट में नहीं बता सकता क्योंकि लाइनों आरोपित कर रहे हैं: इंटरनेट एक्सप्लोरर, things are a little more complicated के लिए कि

नोट।

क्रोम टूल्स में मेमोरी उपयोग को ट्रैक करने के बारे में अधिक युक्तियों के लिए this article भी देखें।