d3.js v4 - 嵌套选择

Question

在d3.js v4中，嵌套选择似乎不像过去那样有效。

这工作（在第3节）：

var data = [["1-a", "1-b"], ["2-a", "2-b"]];

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

var row = tbody.selectAll("tr").data(data);
row.exit().remove();
row.enter().append("tr");

var cell = row.selectAll("td").data(function(d){ return d;});
cell.exit().remove();
cell.enter().append("td");
cell.text(function(d){ return d; });

https://jsfiddle.net/nwozjscs/

但不是在v4： https ： //jsfiddle.net/nwozjscs/1/

我的感觉是这与合并（...）更改有关，但我无法找到在v4中编写嵌套选择的正确方法的示例。

Answer 1

我想我明白了。 如果您的加入数据的下一层之前合并输入和更新的选择到一个单一的选择看起来正常工作。 这样，任何新数据以及顶级的任何现有数据都将在下一级别被正确考虑。

如果你仔细想想，这就完全有道理了。 我觉得我太习惯了v3的魔力来看明显的。

请评论是否有更好的方法来做到这一点！

https://jsfiddle.net/nwozjscs/2/

function render(data){
  var tbody = d3.select("tbody");

  var row = tbody.selectAll("tr").data(data);
  var rowenter = row.enter().append("tr");

  var cell = row.merge(rowenter)
    .selectAll("td").data(function(d){ return d;});

  cell.enter().append("td").text(function(d){ return d; });
}

render([["1-a", "1-b"], ["2-a", "2-b"]]);

setTimeout(function(){
    render([["1-a", "1-b", "1-c"], ["2-a", "2-b", "2-c"], ["3-a", "3-b", "3-c"]]);
}, 2000);