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

Question

在上面的代码中我的.append（“text”）dosent work.I没有在我的链接上插入任何文本。 我试过使用link.append（“路径”）..使用这个我可以看到文本，但不是链接。我想使用 link.insert（“路径”），并且仍然能够添加文本，并能够与链接 文本一起折叠和展开节点。请帮助

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以保持整洁