d3マウスオーバーで1回描画する

Question

私はd3jsを使用してボタンのリストを作成しています。これは正常に実行できます。

ボタンの上にカーソルを置いたときにX（閉じる）ボタンを追加しようとしています。しかし、xはDOMを検査するように見えますが、x要素は無限の時間描かれます。

btnArray.forEach(function (button) { 

    const btn = document.createElement('div'); 
    btn.type = 'button'; 
    btn.value = button.name; 
    btn.onClick = evt => { 
     // do soemthing on click 
    } 

    btn.onmouseover = function(e) { 
     var me = d3.select(btn); 
     me.append('div') 
      .classed({'btn-close': true}) 
      .text('x'); 
    } 

    btn.onmouseout = function(e) { 
     var me = d3.select(btn); 
     me.selectAll('btn-close') 
      .remove(); 
    } 

}); 

Answer 1

要素は、すべてのマウスオーバーで追加されているが、それは削除されていないので、あなたが"X"無限回を見ている理由があります。これが理由です：

me.selectAll('btn-close') 

それは次のようになります：

me.selectAll('.btn-close') 
//class here--^ 

あなたは...

.classed({'btn-close': true}) 

しかし、あなたはクラスで選択していないが、クラスを設定していますPS：これはあなたの質問の範囲外ですが、私はあなたのコードについていくつかの検討をしたいと思います。これを建設的な批判として捉えてください。より慣用的なD3を書くことができます：

1. D3コードに要素を追加するためのループは必要ありません。 の選択肢を使用してください。慣用的なD3コードは、もしあれば、非常に少ないループしか持たない。
2. DOMを操作するためにD3メソッドを使用します。 document.createElement('div')に問題はありません（ちなみに、appendChildがありません）が、D3メソッドを使用すると問題はありません。
3. 同じ要素を削除して追加する代わりに、不透明度または表示を変更できます。