如何在树形图示例的边缘放置标签？

Question

给定树状图(如树状图示例(源)),如何在边缘上放置标签？绘制边的Javascript代码看起来像下一行:

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

Answer 1

D3的作者Mike Bostock非常慷慨地帮助了以下解决方案.为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];
    });