d3节点标签

小编典典

d3节点标签

html

我一直在使用此d3项目中的示例代码来学习如何显示d3图形，但似乎无法使文本显示在圆圈的中间）。我看过其他示例并尝试添加

node.append("title").text("Node Name To Display")

和

node.append("text")
    .attr("text-anchor", "middle")
    .attr("dy", ".3em").text("Node Name To Display")

在定义了节点之后，但是当我将鼠标悬停在每个节点上时，我看到的唯一结果是显示“要显示的节点名称”。它没有显示为圆圈内的文本。我是否需要编写自己的svg文本对象，并根据圆的半径确定需要放置的svg文本对象的坐标？从其他两个示例来看，似乎d3已经以某种方式进行了处理。我只是不知道正确的属性来调用/设置。

阅读 802

2020-05-10

共1个答案

小编典典

有很多示例显示了如何在图形和树的可视化效果中添加标签，但是我可能最简单地从这一示例开始：

您尚未发布代码链接，但我想这node是指SVG圆形元素的选择。您不能将文本元素添加到圆形元素，因为圆形元素不是容器；向圆中添加文本元素将被忽略。

通常，您使用G元素为每个节点分组一个圆形元素（或一个图像元素，如上所述）和一个文本元素。生成的结构如下所示：

<g class="node" transform="translate(130,492)">
  <circle r="4.5"/>
  <text dx="12" dy=".35em">Gavroche</text>
</g>

使用数据联接为每个节点创建G元素，然后使用selection.append为每个节点添加一个圆和一个文本元素。像这样：

var node = svg.selectAll(".node")
    .data(nodes)
  .enter().append("g")
    .attr("class", "node")
    .call(force.drag);

node.append("circle")
    .attr("r", 4.5);

node.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

这种方法的一个缺点是您可能希望将标签绘制在圆圈的顶部。由于SVG尚不支持z-index，因此按文档顺序绘制元素。因此，上述方法会导致标签 _在其圆上方_绘制，但也可能_在其他圆下方_绘制。您可以通过使用两个数据联接并为圆和标签创建单独的组来解决此问题，如下所示：

<g class="nodes">
  <circle transform="translate(130,492)" r="4.5"/>
  <circle transform="translate(110,249)" r="4.5"/>
  …
</g>
<g class="labels">
  <text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text>
  <text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text>
  …
</g>

和相应的JavaScript：

var circle = svg.append("g")
    .attr("class", "nodes")
  .selectAll("circle")
    .data(nodes)
  .enter().append("circle")
    .attr("r", 4.5)
    .call(force.drag);

var text = svg.append("g")
    .attr("class", "labels")
  .selectAll("text")
    .data(nodes)
  .enter().append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

此技术在“ 移动专利诉讼”示例中使用（带有用于创建白色阴影的附加文本元素）。

2020-05-10