javascript - 将文本附加到 D3 力布局图

Question

我正在尝试修改此处的力布局图 http://bl.ocks.org/mbostock/4062045通过在圆圈内添加文本，但文本不会出现。我将这段代码添加到网站上的原始代码中。

node.append("text")
  .style("text-anchor", "middle")
  .text(function(d) { return d.name; }); 

Answer 1

我没有完整的代码，但我认为您正在将文本添加到圆圈中，并且由于圆圈很小，因此您看不到文本。

现在，您的节点当前是圆形(我只是假设)。如果您希望每个节点都有圆圈和文本，那么您的节点应该是 svg g 元素(g 代表“组”)，并且为每个这样的 g 元素分配一个圆圈和一个文本。有关更多信息，您可以找到 here (代码也包含在那里)

编辑:一旦您看到标签，您就会希望以与节点相关的良好方式定位它们。以下是与将标签定位到图形节点相关的几乎官方建议:

对于垂直对齐，请使用“dy”属性:

by default, the baseline of the text is at the origin (bottom-aligned)
a dy of .35em centers the text vertically
a dy of .72em places the topline of the text at the origin (top-aligned)

使用 em 单位很好，因为它会根据字体大小自动缩放。如果您不指定单位，则默认为像素。

对于水平对齐，请使用“text-anchor”属性:

the default is "start" (left-aligned for left-to-right languages)
"middle"
"end"