如何在树状图示例的边缘添加标签？

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]; 
    });