使用可变长度的新数据更新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/