d3.js exit/removeでイベントリスナーを切り離す必要がありますか？

Question

私はツールチップを表示するためにsvg円にmouseoverイベントハンドラを追加するいくつかのコードを持っています。サークル要素を削除するときに、これらのハンドラを削除/アンバインドする必要がありますか？これらのハンドラがSVGオブジェクトにアタッチされているかどうかわかりません。シャドウドームやメモリリークにつながる恐れがあります。以下のコードを参照してください：

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

Answer 1

を私はあなたが既にあなたの答えを持っていると思うが、私は、あなたが、これは、少なくとも最新のChromeで、真実であることを示しているかに興味がありました。

この

は、DOMノードを削除し 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') });  

ライブバージョン：

私はD3と、円ノードの多くを追加/削除の簡単なストレステスト作成 http://bl.ocks.org/explunit/6413685

1. オープンし、最新のクローム
2. オープンして上記のデベロッパーツール
3. タイムラインタブをクリック
4. 下
5. でコードボタンは、ガベージコレクションの鋸歯状のパターンのいくつかの

をカバーする

ドラッグトップタイムラインビュー内のセレクタの記録を停止するには、再度ボタンをクリックして、それは数分のために実行してみましょうDOMノードのガベージコレクションのカウントは、イベントリスナーのガベージコレクションのカウントに対応しています。

注意をすることをInternet Explorerの、things are a little more complicatedのために：行が重畳されているので、実際には、あなたは本当に下のスクリーンショットでそれらを区別することはできません。

Chromeツールでのメモリ使用量のトラッキングに関するヒントについては、this articleも参照してください。