D3.js點擊更新dom元素文本

Question

請參閱my codepen我正在處理的內容。

當我點擊的傳說（左上），我想將數據集我C3.js

目前所做的圖表下顯示的數據附加到DOM與p元素，當你點擊任何圖例項目。問題是，當您單擊不同的圖例項目時，這些元素中的文本不會被清除和更新。完成此代碼是行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

現在，解釋爲什麼你有沒有工作的。在點擊方法中，您使用了「輸入」。發生什麼事情是每當DOM中沒有元素與綁定數據匹配時，執行後輸入的代碼。由於在點擊一次後數據集中的元素總是與p元素相同，輸入代碼沒有任何作用。現在，如果有任何其他元素，輸入法會捕獲它們，並且您會看到一個更改...讓我告訴你in this codepen.

我更新了您的codepen中的數據源，以便每個數據集。嘗試點擊data1，data2，data3 ...等。每次你都會看到，因爲數據集每次增長一個，所以在dom中需要一個新元素，所以p元素被添加爲對應於CURRENT數據集。請注意，當你倒退時，元素不會消失。這是退出進來的地方......我打算用another codepen來說明這個概念：

在這個codepen中，你會看到我使用「exit」來刪除任何額外的dom元素， t存在於當前數據集中。然而，這假定其餘的數據是相同的。

我的final codepen說明了在將它綁定到正在追加的p元素之前，每次我使用退出技術將數據重置爲零的位置。這支筆實際上與我原來的筆相同。唯一的區別是我明確地解除綁定和綁定數據，並且在我的原始數據中，我只是對p元素進行了檢查，以便每次都使用enter方法。

請讓我知道，如果任何這是不明確的或對你沒有任何意義。