D3ツリーレベルセレクタ

Question

d3.jsで作成されたこれらのツリーのレベルセレクタを追加できますか？

http://bl.ocks.org/mbostock/2966094 または bl.ocks.org/mbostock/4339083

レベルの位置を取得したり、それを拡張するために、各レベルにラベルを追加します。

例の画像を追加しました。

Answer 1

ここに例を取る：http://bl.ocks.org/mbostock/4339083

を私はレベルによってノードを入れ子にすることから始めます：

var nodesByLevel = d3.nest().key(function (d) {return d.depth}).entries(nodes); 

あなたのボックスを追加するには、ような何か：

svg.selectAll(".levelBox") 
    .data(nodesByLevel) 
    .enter()   // one box per level 
    .append("text") 
    .attr("class","levelBox") 
    .attr("x", function (d) {return d.values[0].x}) //take the x of the first node in this layer 
    .text(function(d) {return d.key}) //the key from the nesting, i.e. the depth  
    .onclick(levelExpand); // click handler 

を

上記は単なるスケルトンに過ぎませんが、 update機能に入る必要があります（データを追加した後にexit()とupdate()の選択と追加の描画機能が必要です）。

levelExpandには、クリックされたボックス（d.values）のノードのリストにアクセスできます。リストを参照して展開し、図面を更新することができます。

​​