無法在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以保持整潔