html - d3 节点标记

Question

我一直在使用 this d3 project 中的示例代码学习如何显示 d3 图表，我似乎无法让文本显示在圆圈中间(类似于 this example 和 this example )。我查看了其他示例并尝试添加

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

和

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

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

Answer 1

有lots of examples展示了如何向图形和树可视化添加标签，但我可能会从最简单的开始:

• > http://bl.ocks.org/950642

您还没有发布指向您的代码的链接，但我猜测 node 指的是一组 SVG 圆形元素。您不能将文本元素添加到圆形元素，因为 圆形元素不是 containers ;将文本元素添加到圆圈将被忽略。

通常，您使用 G 元素对每个节点的圆形元素(或图像元素，如上所述)和文本元素进行分组。生成的结构如下所示:

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

使用 data-join为每个节点创建 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 });

此技术用于 Mobile Patent Suits示例(带有用于创建白色阴影的附加文本元素)。