使用D3多次更新表不起作用

Question

我有一个页面需要加载新数据，并使用d3将其更新为现有的表元素。我正在写以下内容，但没有成功：

// completeTableData = [ {head1:va1, head2: val2}, {haed1: val4, head2: val5}, ... ]
var tr = d3.select("tbody")
.selectAll("tr")
.data(completeTableData);   
tr.exit().remove();                       // remove the previous data in the table
tr.merge(tr.enter().append("tr"));
var td = tr.selectAll("td")
td.data(function(d, i) { 
return Object.values(d);
});  
td.exit().remove();
td.merge(td.enter().append("td"));

看起来tr更新正确，但td总是反映以前的数据，没有得到更新。

Answer 1

D3中的选择是不可变的。因此，这个：

tr.merge(tr.enter().append("tr"));

不会改变tr是什么。因为你显然希望它是"更新+输入"选项，所以你必须重新分配它：

tr = tr.merge(tr.enter().append("tr"));

最后，我建议命名输入选择，所以整个过程将是：

var trEnter = tr.enter().append("tr");
tr = tr.merge(trEnter);