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似乎工作。