d3中帶彎頭連接器的樹/樹狀圖

Question

我對d3.js（以及一般的SVG）非常陌生，我想做一些簡單的事情：帶角度連接器的樹/樹狀圖。

我從這裏蠶食D3的例子：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

使用SVG的「H」和「V」path commands用自定義路徑生成器替換diagonal函數。

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

注意，源和目標的座標（X和Ÿ）進行交換。此示例以水平方向顯示佈局，但佈局始終使用相同的座標系：x是樹的寬度，和是樹的深度。因此，如果要顯示右邊的葉子（最底部）節點的樹，則需要交換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/