d3.js - LinkText 在树布局 d3js 中不起作用

Question

我试图将 linkText 放在树状布局 d3js 中，但它不是 wlrking，创建了 jsfiddle 项目 here .任何人都可以让我知道，为什么 linkText 没有出现。

var link = svg.selectAll(".link")
                .data(links, function (d) {
                    return d.target.id;
            });
link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function (d) {
    var o = {
        x : source.x0,
        y : source.y0
    };
    return diagonal({
        source : o,
        target : o
    });
});

link.transition().duration(duration)
.style("stroke", function (d) {
    return "#99FFCC";
})
.attr("d", diagonal);
link.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial").attr("transform", function(d) {
    return "translate(" +
        (d.target.y - 50) + "," + 
        (d.target.x - 10) + ")";
}).attr("text-anchor", "middle").text(function (d) {
alert(d.target.label);
return d.target.label;
});

Answer 1

你的错误在这里:

link.enter().insert("path", "g")
.attr("class", "link")
...
...
link.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")

这段代码会将文本放在路径 DOM 中，这是不正确的。
文本 DOM 永远不应该在路径 DOM 内。

正确的代码应该是这样的:

// Update the links…
    var link = svg.selectAll("path.link")
        .data(links);
    //adding the text to the svg
link.enter().insert("text")
        .attr("font-family", "Arial, Helvetica, sans-serif")
        .attr("fill", "Black")
        .style("font", "normal 12px Arial")
         .attr("transform", function (d) {
                return "translate(" + (d.target.y - 30) + "," + (d.target.x - 10) + ")";
            })
        .attr("text-anchor", "middle")
        .text(function (d) {
        console.log(d.target.label);
        return d.target.label;
    });

完整工作代码 here .