d3.js Devo staccare il listener di eventi all'uscita/rimuovi?

Question

Ho un codice che aggiunge un gestore di eventi mouseover a cerchi svg per visualizzare descrizioni comandi. Devo rimuovere/dissipare questi gestori quando rimuovo gli elementi del cerchio? Non so se questi gestori sono collegati all'oggetto svg e temo che possa portare a domini di ombre o perdite di memoria. Vedere codice qui sotto:

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

Answer 1

Penso che tu abbia già la risposta, ma ero interessato a come si mostra che questo è vero, almeno in ultima Chrome.

Questa è la section of the D3 code che rimuove i nodi DOM:

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

Così come si può vedere che è in funzione del browser per fare pulizia di tutti i listener associati.

ho creato un semplice test di stress di aggiunta/rimozione di un sacco di nodi cerchio con D3:

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') });  

versione dal vivo qui: http://bl.ocks.org/explunit/6413685

1. Aprire il sopra con il più recente Chrome
2. Aprire il Strumenti per sviluppatori
3. Fare clic sulla scheda Linea temporale
4. Fare clic su Re pulsante cavo nella parte inferiore
5. lasciarlo funzionare per un paio di minuti, quindi nuovamente il tasto per interrompere la registrazione
6. trascinare il selettore nella vista dall'alto timeline per coprire vari di garbage collection modelli sawtooth

Si noterà che i conteggi di garbage collection del nodo DOM corrispondono ai conteggi della raccolta di dati inutili del listener di eventi. In realtà, non si può dire davvero loro a parte nello screenshot qui sotto in quanto le linee si sovrappongono:

Si noti che per Internet Explorer, things are a little more complicated.

Vedere anche this article per ulteriori suggerimenti sul monitoraggio dell'utilizzo della memoria negli strumenti di Chrome.