d3.js v4 - 嵌套选择

Question

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

这工作（在V3）：

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