Javascript D3.js数据更新“；“记住”；旧数据

我想更新条形图，但它“记住”了我初始化条形图时使用的数据长度。 以下是我认为我应该做的：

• 创建图表并首次使用5个对象的数组绘制它-渲染效果很好
• 使用原始数据的子样本更新图表（现在只有4个对象）
• 更新可以工作，但它不会渲染彼此重叠的条，而是在移除对象之前的位置留下间隙

我希望更新使条形图只显示阵列中的剩余对象，而不显示间隙。我做错了什么

你可以在这里找到代码：玩它。或者在这里以简单的形式：

  var svg = d3.select("svg");

  var BarChart = function BarChart( chart_attributes ){
    // hide variables within function scope
    var chart = {},
        data;

    // data setter and getter
    chart.data = function( new_data ){
      if( new_data ){ data = new_data; }
      return data; 
    };

    // update data and redraw chart
    chart.update = function( new_data ){
      // update data
      if( !new_data ){ console.log("chart.update() - no data set!"); }
      else{ chart.data( new_data ); }   

      // redraw
      var bar_attr = chart_attributes.bars;
      var groups = svg.selectAll("g").data( chart.data(), function(d){ return d.NAME } );

      var g = groups.enter().append("g")
         .attr("transform", function(d, i) { return "translate(100," + ((i * bar_attr.height)+100) + ")"; });

      var bars = g.append("rect")
        .attr("x", bar_attr.x)
        .attr("height", bar_attr.height-1).transition()
      .attr("width", function(d,i){return d.INTENSITY*10} );

      g.append("text")
        .attr("y", bar_attr.height-2 )
        .attr("x", 0)
        .attr("font-size", bar_attr.height )
        .text( bar_attr.label);

      groups.exit().remove();

    };


    return chart;
  };


  var data = [ 
    { "INTENSITY": 9,  "NAME": "label 1"},
    { "INTENSITY": 10, "NAME": "label 2"},
    { "INTENSITY": 10, "NAME": "label 3"},
    { "INTENSITY": 13, "NAME": "label 4"},
    { "INTENSITY": 21, "NAME": "label 5"}
  ];

  var margin_top = 50,
      margin_left = 70,
      bar_height = 20;

  var bar_attributes = {
    "x": margin_left,
    "y": function(d,i){ return (i*bar_height)+margin_top;},
    "height": bar_height,
    "width": function(d,i){ return d.INTENSITY*10},
    "label": function(d,i){ return d.NAME }
  };

  var attr = {"bars": bar_attributes };

  var chart = new BarChart( attr );

  chart.update(data);
  data.splice(1,1)
  chart.update(data);

---

问题是您没有为更新的数据更新条的位置。设置

g

元素位置的代码仅在新数据上运行：

var g = groups.enter().append("g")
     .attr("transform", function(d, i) { return "translate(100," + ((i * bar_attr.height)+100) + ")"; });

将此替换为

var g = groups.enter().append("g");
groups.attr("transform", function(d, i) { return "translate(100," + ((i * bar_attr.height)+100) + ")"; });

修复了问题--现在为所有新的和现有的

g

元素设置了位置。完整的例子