Question

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

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

Answer 1

我没有完整的代码，但我认为你正在添加文字INTO圈子，因为圈子很小，你看不到文字。

现在，您的节点目前是圈子（我猜想）。如果您想要每个节点都有圆圈和文本，那么您的节点应该是svg g元素（g代表“group”），并且每个这样的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"

将文本附加到D3强制布局图

1 个答案: