D3.js 数据更新“记住”旧数据答案

【问题标题】：D3.js data update "remembers" old dataD3.js 数据更新“记住”旧数据
【发布时间】：2014-02-10 17:01:50
【问题描述】：

我想更新一个条形图，但它“记住”了我初始化它的数据的长度。以下是我的想法：

第一次创建图表并使用包含 5 个对象的数组进行绘制 - 渲染效果很好
使用原始数据的子样本更新图表（现在只有 4 个对象）
更新有效，但它不会将条相互重叠，但会在删除对象之前的位置留下空隙。

我希望更新使条形图仅显示数组中剩余的对象而没有间隙。我做错了什么？

你可以在这里找到代码：http://tributary.io/inlet/8919193 来玩它。或者在这里以简单的形式：

  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);

【问题讨论】：

标签： javascript charts d3.js

【解决方案1】：

问题在于您没有更新条形的位置以获取更新的数据。设置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 元素设置了位置。完整示例here。

【讨论】：