Javascript 在d3中更新条形图生成多个图表

我遵循给定的D3教程

我已经在两个函数中设置了我的代码，一个是init，另一个是update

var xScale = null;
var chart = null;
function init(w, c) {
    xScale = d3.scale.linear()
        .range([0, w]);
    chart = d3.select(c)
        .append('svg')
            .attr('width', w);

function update(data) {
        xScale.domain([0, d3.max(data, function(d) { return +d.value; })]);                
        chart.attr('height', 20 * data.length);           
        var bars = chart.selectAll('g')         
            .data(data);
        bars.exit().remove();
        bars.enter().append('g')
            .attr('transform', function(d, i) { return 'translate(0,' + i * 20 + ')'; });
        bars.append('rect')
            .attr('width', function(d) { return xScale(+d.value); })
            .attr('height', 18);

        bars.append('text')
            .attr('x', function(d) { return xScale(+d.value); })
            .attr('y', 10)
            .attr('dy', '.45em')
            .text(function (d) { return d.name; });
}

当我第一次调用update时，条形图是正确创建的，在后续的update调用中，它在标记下创建rect和text元素，而不是更新

我的数据是一个dict{'name'：a'value'：12，…}每次更新的元素数可以不同。每个更新中可能有相同的键名和不同的值

bars = chart.selectAll('g')

您正在选择所有新的和现有的g元素

bars.append('rect');
bars.append('text');

因此，当您在条形图上调用append时，您将rect和text元素附加到新的和现有的g元素

/* Enter */
enter = bars.enter().append('g');
enter.append('rect');
enter.append('text');

/* Update */
bars.attr('transform', function(d, i) { 
  return 'translate(0,' + i * 20 + ')';
});
bars.select('rect')
  .attr('width', function(d) { return xScale(+d.value); })
  .attr('height', 18);
bars.select('text')
  .attr('x', function(d) { return xScale(+d.value); })
  .attr('y', 10)
  .attr('dy', '.45em')
  .text(function (d) { return d.name; });

这允许您仅将rect和text元素附加到enter选择中，但仍然允许您使用新数据更新所有元素

注: 追加或插入时，“输入”选择将合并到“更新”选择中。现在，您可以在输入节点后仅将它们应用于更新选择一次，而不是将相同的运算符分别应用于enter和update选择。 见：

---

在fiddle或Plunk上添加代码与以前一样，我需要添加bar.exit.remove