d3のエルボーコネクターを使用したツリー/樹形図

Question

私はd3.js（およびSVG全体）の新機能を使用しています。

私はここからD3の一例をcannibalisedている：http://mbostock.github.com/d3/ex/cluster.html と私はそれがよりここprotovisの例のようにしたい：

• http://mbostock.github.com/protovis/ex/indent.html
• http://mbostock.github.com/protovis/ex/dendrogram.html

私はスタートをしましたここに：http://jsbin.com/ugacud/2/edit#javascript,htmlと私は間違っている次のスニペットだと思う：

var diagonal = d3.svg.diagonal() 
.projection(function(d) { return [d.y, d.x]; }); 

しかし、明白な交換はありません。d3.svg.lineを使用できますが、正しく統合する方法がわかりません。理想的には、私はエルボーコネクターが好きです...私が間違っている私が見てきた多くのd3の例は、重力を使って木の代わりにオブジェクトのグラフを描いているためです。

Answer 1

diagonal関数をSVGの "H"と "V"を使用してカスタムパスジェネレータに置き換えてくださいpath commands。ソースとターゲットの座標（X とY）が交換されていることを

function elbow(d, i) { 
    return "M" + d.source.y + "," + d.source.x 
     + "V" + d.target.x + "H" + d.target.y; 
} 

注意。この例では、水平方向のレイアウトを表示しますが、レイアウトは常に同じ座標系を使用します。xはツリーの幅です。yはツリーの深さです。したがって、右端にリーフ（一番下）のノードを持つツリーを表示する場合は、xとyを入れ替える必要があります。これが対角の投影関数ですが、上記の肘の実装では、configurable functionを使用するのではなく、その動作をハードコーディングしただけです。

svg.selectAll("path.link") 
    .data(cluster.links(nodes)) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("d", elbow); 

と作業例：

と同様に

• http://bl.ocks.org/d/2429963/