如何在樹狀圖示例的邊緣添加標籤？

Question

給出一個像Dendrogram示例（source）的樹圖，如何將標籤放在邊上？ JavaScript代碼繪製邊緣看起來像是下一行：

var link = vis.selectAll("path.link") 
    .data(cluster.links(nodes)) 
    .enter().append("path") 
    .attr("class", "link") 
    .attr("d", diagonal); 

Answer 1

邁克·博斯托克，D3的作者，非常親切地用以下解決方案幫助。定義g.link的樣式;我只是複製了g.node的樣式。然後我用下面的代碼替換了「var link = ....」代碼。 x和y函數將標籤放置在路徑的中心。

var linkg = vis.selectAll("g.link") 
    .data(cluster.links(nodes)) 
    .enter().append("g") 
    .attr("class", "link"); 

linkg.append("path") 
    .attr("class", "link") 
    .attr("d", diagonal); 

linkg.append("text") 
    .attr("x", function(d) { return (d.source.y + d.target.y)/2; }) 
    .attr("y", function(d) { return (d.source.x + d.target.x)/2; }) 
    .attr("text-anchor", "middle") 
    .text(function(d) { 
     return "edgeLabel"; 
    }); 

文本函數應該理想地爲每條邊提供一個標籤。我填充我邊的名字對象在準備我的數據，所以我的文本功能如下：

.text(function(d) { 
     var key = d.source.name + ":" + d.target.name; 
     return edgeNames[key]; 
    });