D3.jsは、クリック時にDOM要素テキストを更新します。

Question

私が取り組んでいることについてはmy codepenを参照してください。

私は（左上）の伝説をクリックすると、私は現在C3.js

で作られたグラフの下に表示するデータセットをしたいと思い、データはあなたp要素をDOMに追加されます任意の凡例項目をクリックします。問題は、これらの要素のテキストがクリアされず、別の凡例項目をクリックしたときに更新されないことです。これを達成したコードは、行55-61

.on('click', function (id) { 
    chart.data(id)[0].values.map(obj => console.log(obj.value)) 
    d3.select('#values').selectAll("p") 
     .data(chart.data(id)[0].values) 
     .enter() 
     .append('p') 
     .text(function(d) { return d.value }) 

です私は伝説のアイテムをクリックしたとき、どのように私はD3が#valuesと新しいデータで更新中の値をクリアすることができますか？私はd3が値を自動的に更新することを期待していましたが、クリックされた最初のデータセットのみが表示されます。

Answer 1

私はあなたの問題を解決したと思います。追加する前にその要素を削除するだけです。こちらをクリックしてください方法の肉です：今

chart.data(id)[0].values.map(obj => console.log(obj.value)) 
    d3.selectAll('.legend_values') 
     .remove(); 
    d3.select('#values').selectAll("p") 
     .data(chart.data(id)[0].values) 
     .enter() 
     .append('p') 
     .text(function(d) { return d.value }) 
     .classed('legend_values', true); 

https://codepen.io/deweyredman/pen/RKeOJp?editors=1010

、あなたは動作しませんでしたどのような理由として説明。 clickメソッドでは、 "enter"を使用しました。バインドされたデータと一致する要素がDOMにない場合は、入力後のコードが実行されます。一度クリックすると、データセット内の要素に対応するp要素の数は常に同じであるため、入力コードは何も実行していません。今、追加の要素があれば、入力メソッドはそれらをキャッチし、そこに変更が表示されます... in this codepen.

私はあなたのコードのデータソースを1つずつ増やすように更新しましたデータセット。 data1、data2、data3 ...をクリックしてみてください。毎回データセットが1つずつ増えるので、新しい要素がdomに必要なので、p要素がCURRENTデータセットに対応して追加されます。あなたが後ろに行くと、要素が消えないことに注意してください。これは出口が来るところです...

このコードでは、「exit」を使用して他のDOM要素を削除していることがわかります現在のデータセット内に存在する。ただし、これは残りのデータが同じであることを前提としています。

私のfinal codepenは、終了テクニックを使用して、追加するp要素にデータをバインドする前にデータを常にnilにリセットする場所を示しています。このペンは、私のオリジナルと同じものを実際に実現します。ここでの唯一の違いは、データを明示的にバインドしてバインドしていることです。オリジナルのものでは、p要素をヌークして、毎回enterメソッドが起動するようにしています。

これが不明確な場合や、わからない場合は教えてください。