d3 节点标签 [英] d3 Node Labeling

问题描述

我一直在使用来自这个 d3 项目的示例代码来学习如何显示 d3 图形和我似乎无法让文本显示在圆圈中间(类似于 this示例 和这个示例).我查看了其他示例并尝试添加

I've been using the sample code from this d3 project to learn how to display d3 graphs and I can't seem to get text to show up in the middle of the circles (similar to this example and this example). I've looked at other examples and have tried adding

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 已经以某种方式解决了这个问题.我只是不知道调用/设置的正确属性.

right after node is defined but the only results I see is "Node Name To Display" is showing up when I hover over each node. It's not showing up as text inside the circle. Do I have to write my own svg text object and determine the coordinates of that it needs to be placed at based on the coordinates of radius of the circle? From the other two examples, it would seem like d3 already takes cares of this somehow. I just don't know the right attribute to call/set.

推荐答案

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

There are lots of examples showing how to add labels to graph and tree visualizations, but I'd probably start with this one as the simplest:

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

您尚未发布代码链接，但我猜 node 指的是 SVG 圆元素的选择.您不能向圆元素添加文本元素，因为 圆元素不是 容器;将文本元素添加到圆圈将被忽略.

You haven’t posted a link to your code, but I'm guessing that node refers to a selection of SVG circle elements. You can’t add text elements to circle elements because circle elements are not containers; adding a text element to a circle will be ignored.

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

Typically you use a G element to group a circle element (or an image element, as above) and a text element for each node. The resulting structure looks like this:

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

使用 data-join 为每个节点创建 G 元素，然后使用selection.append 为每个添加一个圆圈和一个文本元素.像这样:

Use a data-join to create the G elements for each node, and then use selection.append to add a circle and a text element for each. Something like this:

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，因此元素按文档顺序绘制；因此，上述方法导致标签被绘制在圆圈上方，但它可能被绘制在其他圆圈下方.您可以通过使用两个数据连接并为圆圈和标签创建单独的组来解决此问题，如下所示:

One downside of this approach is that you may want the labels to be drawn on top of the circles. Since SVG does not yet support z-index, elements are drawn in document order; so, the above approach causes a label to be drawn above its circle, but it may be drawn under other circles. You can fix this by using two data-joins and creating separate groups for circles and labels, like so:

<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:

And the corresponding 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 示例(附加文本元素用于创建白色阴影).

This technique is used in the Mobile Patent Suits example (with an additional text element used to create a white shadow).

这篇关于d3 节点标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！