可変長の新しいデータでd3棒グラフのラベルを更新する

Question

d3を使用してラベル付きの単純な棒グラフを描画しています。既存のグラフよりも多くのアイテムを含む新しいデータでチャートを更新できます。私はenter/update/exitを使う必要があることを知っていますが、選択に問題があり、アップデートが正しく機能しています。私はバーとラベルをグループ化しています。更新しようとすると、グループを更新する代わりに、別のバーをグループに追加し続けます。

私は、この機能を更新しています：私は物事のカップルに変更

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(); 
} 

Answer 1

：あなたの更新機能に

• を、それがnewData、ないdataする必要があります。
• barMarginに値を設定します。
• は、更新機能にbar.textを追加しました。

しかし、最も重要なのは、このように、データへの鍵を提供していた。ここで

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

はフィドルです： https://jsfiddle.net/gerardofurtado/fybLrujp/2/