Aktualisieren von d3 Balkendiagramm Etiketten mit neuen Daten variabler Länge

Question

Ich zeichne ein einfaches Balkendiagramm mit Etiketten mit d3 und möchte in der Lage sein, das Diagramm mit neuen Daten zu aktualisieren, die mehr oder weniger Elemente als das vorhandene Diagramm haben können. Ich weiß, ich muss enter/update/exit verwenden, aber ich habe Probleme mit der Auswahl und das Update richtig funktioniert. Ich habe die Bar und die Etiketten gruppiert und wenn ich versuche, zu aktualisieren, füge ich der Gruppe einen weiteren Balken hinzu, anstatt ihn zu aktualisieren.

ich mit dieser Funktion bin Aktualisierung:

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

änderte ich ein paar Dinge:

• in Ihrer Update-Funktion, sollte es newData sein, nicht data;
• den Wert auf barMargin setzen;
• hinzugefügt die bar.text der Update-Funktion.

Aber das wichtigste einen Schlüssel für die Daten zur Verfügung stellte, wie folgt aus:

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

Hier ist die Geige: https://jsfiddle.net/gerardofurtado/fybLrujp/2/