D3 - 添加文本标签以更新力布局图答案

【问题标题】：D3 - adding text labels to updating force layout diagramD3 - 添加文本标签以更新力布局图
【发布时间】：2016-12-05 17:30:21
【问题描述】：

我一直在努力扩展我在网上看到的 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);

在tick函数中更新以匹配节点

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

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

非常感谢。

【问题讨论】：

标签： javascript d3.js svg

【解决方案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 似乎工作。

【讨论】：

谢谢，这正是我所缺少的。非常感谢。