无法在d3可折叠树中的链接上添加文本

Question

在上面的代码我的.append("文本")dosent work.I没有在我的链接上插入任何文本.我尝试使用link.append("path")..使用此我可以看到文本但不能看到链接.我想使用link.insert("path"),仍然能够添加文本,并能够折叠和扩展节点以及链接文本.请帮忙

var link = svg.selectAll("path.link")
                         .data(links, function (d) { return d.target.id; });

// Enter any new links at the parent's previous position.
//  var link1=link.enter();
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.enter()
    .append("g")
    .attr("class", "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.source.y + d.target.y)/2) + "," + 
        ((d.source.x + d.target.x)/2) + ")";
    })   
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        console.log(d.target.name);
        return d.target.name;
    });

Answer 1

如果没有小提琴或工作代码的链接,这很难回答,但我认为这可能是你所追求的:http://jsfiddle.net/henbox/82pepd2a/9/

您应该在链接上看到与节点文本对应的红色文本(黑色),这些应该在节点\链接移动时进行转换.

我创建了一个新变量var linktext来处理与链接(path元素)本身分开的文本,因为这是导致路径无法显示的原因.

我还使用insert("g")代替append("g")添加一个完全新的g元件,而不是放置g和text内部的每个path.这是重要的东西:

// Update the link text
var linktext = svg.selectAll("g.link")
    .data(links, function (d) {
    return d.target.id;
});                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       

linktext.enter()
    .insert("g")
    .attr("class", "link")
    .append("text")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text(function (d) {
    //console.log(d.target.name);
    return d.target.name;
});

最后,我添加了"更新"和"删除"块,以便linktext使用类似的链接方法.请注意,我还将样式移动到CSS以获得整洁