如何在树状图示例中将标签放在边缘？

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