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。

LinkText在树形布局d3js中不起作用

1 个答案: