d3.js 图表未使用新数据更新

Question

使用d3.js 通过获取包含 100 个对象的数组来绘制一系列矩形。尽管console.log(data) 显示正在检索新数据，但新数据点似乎没有附加任何矩形。

.enter().append() 使用不当？

function init() {
    var width = 800,
        height = 400,
        margin = 50;

    chart = d3.select('#chart')
                .append('svg:svg')
                .attr('width', width)
                .attr('height', height);
}

function do_update() {
    data = fetch_latest_top100();
    console.log(data)

    chart.selectAll('rect')
        .data(data)
        .enter()
        .append('svg:rect')
        .attr('x', function(d) { return x(d.x); })
        .attr('y', function(d) { return y(d.y); })
        .attr('height', function(d) { return d.value; })
        .attr('width', function(d) { return 3 });
}

jsfiddle：http://jsfiddle.net/BU8cA/

Answer 1

您的更新方法的问题在于它只处理新元素，而不更新现有元素以匹配它们的新数据。使用 enter() 选择创建新矩形后，您必须返回完整的选择（新的和更改的矩形）以设置将要更改的属性。

执行此操作的最简单方法是将选择存储在一个变量中，在您应用数据函数但在调用 enter 方法之前，如下所示：

   var rects = chart.selectAll('rect')
        .data(data);

   rects.enter()
        .append('svg:rect')
        .attr('width', function(d) { return 3 }); 
       // since the width is constant, you only need to set it once

   rects.exit().remove(); //if the number of data points might shrink

   rects.attr('x', function(d) { return x(d.x); })
        .attr('y', function(d) { return y(d.y); })
        .attr('height', function(d) { return d.value; });
   //note that this now includes the rectangles created with enter()
   //as well as the old ones you are resizing / repositioning

这应该得到正确的数据，但你仍然有一个布局问题（无论如何，在小提琴上），因为你的 y 值没有被正确设置。 y 值是矩形顶部的位置，因此，如果您希望条形看起来都位于同一条线上，则需要根据条形的高度对其进行调整。 Mike Bostock 的教程和演示在这里：http://bost.ocks.org/mike/bar/3/

---

D3 版本 4+ 的更新

附加到“输入”选择的元素不再自动添加到主（更新）选择。您现在需要通过在“输入”选择上调用merge 方法来显式创建“合并”选择：

var rects = chart.selectAll('rect')
    .data(data);

rects.exit().remove(); //if the number of data points might shrink

rects.enter()
    .append('svg:rect')
    .attr('width', function(d) { return 3 }) // since the width is constant, you only need to set it once

  .merge(rects) 
          //merge the newly added elements into the main selection
          //of existing elements to update
    .attr('x', function(d) { return x(d.x); })
    .attr('y', function(d) { return y(d.y); })
    .attr('height', function(d) { return d.value; });