Javascript D3更新数据覆盖第二个图形，而不是更新

我对D3非常陌生，我正在开发一个可重用的条形图，它可以发送新数据，并根据接收到的新数据更新现有的图表

目前，它正在正确地绘制图表，但当数据更改时，它将新数据的图形覆盖在旧图形上，而不是更新它

我相信问题一定与我的

条
变量以及如何绑定数据有关，但我不能确定。数据只是来自RedditJSON API的reddit帖子的分数

例如：

我的图表代码是：

d3.namespace.barChart = function() {
var data, group, height, margin = {top: 0, right: 0, bottom: 0, left: 0}, width;

function chart(container) {
  group = container;
  // Determine the max score and timestamps from the Reddit data for use in our scales
  var maxScore = d3.max(data, function(d) { return d.data.score; });
  data.forEach(function(d) {
    d.data.created *= 1000;
  });

  // Create the scales to ensure data fits in the graphs
  var xScale = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeBands([0, width], 0.25);

  var yScale = d3.scale.linear()
    .domain([0, maxScore])
    .range([0, height]); // .range(starting, )

  var yScaleLine = d3.scale.linear()
    .domain([0, maxScore])
    .range([height, 0]);

  var colorScale = d3.scale.linear()
    .domain(d3.extent(data, function(d) { return d.data.score; }))
    .range(['#DA4453', '#A0D468'])
    .interpolate(d3.interpolateRgb);


  // Create the Y-Axis function. yScaleLine is used as the scale to ensure
  // that the data goes from 0 at the bottom left to max score in the top left
  var yAxis = d3.svg.axis()
    .scale(yScaleLine)
    .orient('left');

  // Setup our chart using our width, height and margins.
  group.attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom);

  // Add a group element for the primary graphic that is moved
  // using the margins. Left and top are used since 0,0 is top left corner
  var graph = group.append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  // Append our yAxis to the SVG canvas and move it according to the margins
  group.append('g')
    .attr('class', 'y axis')
    .call(yAxis)
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  // Inside of our group, we need to make a 'rect' for each item in the dataset
  // We link the data, and append one rect for each piece of data.
  var bars = graph.selectAll('rect')
    .data(data, function(d) { return d.data.id; });

  bars.enter()
    .append('rect');
    // We begin with the height of each bar as 0 allowing us to transition to their full height
  bars.attr({
      x: function(d, i) { return xScale(i); },
      y: function() { return height; },
      height: 0,
      width: xScale.rangeBand(),
      fill:  function(d) { return colorScale(d.data.score); }
    });


    // Events must be linked before a transition to function
    bars.on('mouseover', function() {
      d3.select(this).attr('fill', '#000');
    })
    .on('mouseleave', function() {
      d3.select(this).attr('fill', function(d) { return colorScale(d.data.score); });
    });


    bars.transition().duration(150)
    .attr({
      x: function(d, i) { return xScale(i); },
      y: function(d) { return height - yScale(d.data.score); },
      height: function(d) { return yScale(d.data.score); },
      width: xScale.rangeBand()
    });

  bars.exit().transition().duration(150).attr({ height: 0.0001 }).remove();
}

编辑：
在挖掘创建的源代码之后，它似乎没有更新，而是继续为所有的
rect
s创建一个新的svg
g
元素。删除
group.append（'g'）
链会修复图形不更新，但图形不再在组中，并使SVG非常混乱。
更改时会发生什么：bar.exit（）.transition（）.duration（150）.attr（{height:0.0001}）.remove（）；到条。退出（）。删除（）；同样的问题。我已经更新了这篇文章，在源代码中加入了正在发生的事情，并创建了多个g。删除组。追加（'g'）修复了它，但图形不在组中。仅当
g
元素不存在时才追加它们，否则选择它们。您仅将数据绑定到各个条形图。如果您将数据绑定到图形（或容器）本身，那么您可以按照Lars的建议进行操作我喜欢这样做，因为我实际上是有意创建一个覆盖。谢谢