Question

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

创建图表并使用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);

Answer 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。

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

1 个答案: