使用可變長度的新數據更新d3條形圖標籤

我正在使用d3繪製帶有標籤的簡單條形圖，並且希望能夠用可能具有比現有圖表更多或更少項目的新數據來更新圖表。我知道我需要使用輸入/更新/退出，但我在選擇和獲取更新正常工作時遇到問題。我將酒吧和標籤分組在一起，當我嘗試更新時，我一直向組添加另一個欄而不是更新它。使用可變長度的新數據更新d3條形圖標籤

我更新使用此項功能：

function updateChart(){ 
x.domain([0, d3.max(data, function(d) { return d.count; })]); 
chart = d3.select('.chart'); 

bar = chart.selectAll('g') 
     .data(data); 

// Enter… 
bar.enter().append('g') 
    .attr('transform', function(d, i) { return 'translate(0,' + (i * (barHeight+barMargin)) + ')'; }); 

bar.append('rect') 
    .attr("x", labelW) 
    .attr("height", barHeight) 
    .attr('width', 0) 
    .transition() 
    .duration(500) 
    .attr('width', function(d) { return x(d.count); }); 

// Update… 
bar.transition() 
    .duration(500) 
    .attr('width', function(d) { return x(d.count); }); 

// Exit… 
bar.exit() 
    .remove(); 
}

來源

2016-06-23 akire

我改變了一些事情：

，它應該是newData，不data;
將值設置爲barMargin;
將bar.text添加到更新功能。

但最重要的是對數據提供一個關鍵，像這樣：

.data(newData, function(d){ return d.value});

這裏是小提琴：https://jsfiddle.net/gerardofurtado/fybLrujp/2/

來源

2016-06-24 02:08:43

哦，我沒注意到獼猴桃...給我幾分鐘 –

完成後，檢查新的小提琴（編輯答案）。但是，請聽，這只是爲了告訴你它是如何完成的，現在你的代碼有幾個問題。例如，如果您多次點擊「更新」，就會看到它增加了新的文本元素，這些文本元素堆積如山。 –

由於與文本相同的問題，第一個g元素有兩組小節。實際上，如果您多次點擊更新，您將擁有多套酒吧。我只是做了一個新的小提琴（再次！）解決這個問題，請檢查。 –

使用可變長度的新數據更新d3條形圖標籤

回答

相關問題