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