新しい/更新された要素は、古いものからイベントハンドラを継承します。D3

Question

D3で円を作成するときに、それらを割り当てることができます。

svg.selectAll("circle").data(newDataSet,function(d){return d;}).enter().append("circle") 

は（私は目的の属性を除外）

は、次のとおりです。私は新しいサークルを作成し、それゆえ私はこれを行うサークルのデータセットを更新したいのonclickイベント

何らかの理由で私の古いサークルからon（）イベントを継承する方法や、これらのイベントを再度定義する必要がありますか？

d3はオブジェクト指向ではないため、私の理解からは不可能ではありません。

Answer 1

まず、以下は完全に正確ではありません。 enterは既存のDOM要素がないノードを与えるだけです。既存のノードを更新するには、merge（v4）を使用します。

私は新しいサークルを作成し、それゆえ サークルのデータセットを更新したい場合は、私はこれを実行します。

svg.selectAll("circle").data(newDataSet,function(d){return d;}).enter().append("circle") 

は下記、あなたの実際の質問に来るのそれぞれのクリックリスナを割り当てます円domノード。

したがって、新しいノードを追加するには、新しいイベントリスナーを割り当てる必要があります。

データ結合の理解が不足している可能性があります。thisはすばらしい読み取りです。あなたの懸念は、複数のイベントリスナーを割り当てることについてであれば、なぜ円の親要素にイベントリスナーを割り当て、イベントバブルをさせない

function makeCircles(data) { 
     var circles = d3.select('svg') 
       .selectAll('circle') 
       .data(data, function(d) { 
        return d; 
       }); 

     circles.exit().remove(); 

     circles.enter() 
       .append('circle') 
       .merge(circles) 
       .attr('r', function(d) { 
        return d + 5; 
       }) 
       .attr('cx', function(d, i) { 
        return 50 + 50 * i; 
       }) 
       .attr('cy', function(d, i) { 
        return 30; 
       }) 
       .on('click', function() { 
        // 
       }) 
    } 

    var data = [1, 2, 3]; 
    makeCircles(data); 
    data = [10, 15, 16]; 
    makeCircles(data); 

：データを使用すると、次のようになり合流しますか？