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

私はそれを理解したと思う。 の入力と更新の選択項目を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);