D3 - 將文本標籤添加到更新力佈局圖

Question

我一直在努力擴展Mike Bostock的D3例子之一，我在網上看到了一些成功的例子。

https://bl.ocks.org/mbostock/1095795

我已經成功地得到這個適合我的需要，我可以附加額外的節點和鏈路。我試圖給每個節點添加標籤，我想我錯過了一些基本的東西。

我已經爲文本標籤添加了一個新組，並將其包含在示例中的重新啓動函數以及模擬的滴答功能中。在我看來，DOM中出現的東西似乎是正確的，但標籤只出現在圖表的中間。

這裏是我得到的一把小提琴，任何幫助將不勝感激。我一般沒有很多D3/SVG的經驗，所以我認爲我必須缺少一些非常基礎的東西。

具體是什麼我加的是：

添加其他組文本

var g = svg.append("g").attr("transform", "translate(" + width/2 + "," + height/2 + ")"), 
link = g.append("g").attr("stroke", "#000").attr("stroke-width", 1.5).selectAll(".link"), 
node = g.append("g").attr("stroke", "#fff").attr("stroke-width", 1.5).selectAll(".node"), 
text = g.append("g").selectAll("text"); 

更新基於節點ID文本組

// Apply the general update pattern to the text. 
    text = text.data(nodes, function(d) { return d.id; }); 
    text.exit().remove(); 
    text = text.enter().append("text").text(function (d) {return d.id;}).merge(text); 

更新打鉤功能匹配節點

text.attr("cx", function(d) { return d.x;}) 
    .attr("cy", function(d) { return d.y;}); 

https://jsfiddle.net/3b68rm94/1/

非常感謝。

Answer 1

使用

text.attr("x", function(d) { return d.x;}) 
    .attr("y", function(d) { return d.y;}); 

Cx和Cy用於圓（https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/cx）。 x和y似乎工作。