d3节点标记 [英] d3 Node Labeling

问题描述

我一直在使用这个d3项目的示例代码来学习如何显示d3图表和我似乎无法在中间显示文字（类似于这个示例和此示例）。我查看了其他示例，并尝试添加

  node.append（title）。显示）
  

和

  node.append（text）
 .attr（text-anchor，middle）
 .attr（dy，.3em）。 （要显示的节点名）
  

在节点被定义之后，当我将鼠标悬停在每个节点上时，显示要显示的节点名称。它不会显示为圆圈内的文字。我必须写我自己的svg文本对象，并确定它需要放置在基于圆的半径坐标的坐标？从其他两个例子，似乎d3已经关心这种不知何故。我只是不知道正确的属性来调用/设置。

解决方案

有很多例子，展示了如何添加标签到图和树的可视化，但我可能从这个最简单的开始： / p>

• http：// bl。 ocks.org/950642

您尚未向您的代码发布链接，但我猜测 node 指的是SVG圆圈元素的选择。您无法将文字元素添加到圈子元素，因为圈子元素不是容器 ;

通常使用G元素将一个圆形元素（或图像元素，如上所示）和一个文本元素为每个节点。结果结构如下所示：

 < g class =nodetransform =translate（130,492）& 
< circle r =4.5/> 
< text dx =12dy =。35em> Gavroche< / text> 
< / g> 
  

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

  var node = svg.selectAll（。node）
 .data b $ b .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 =12dy =。35em> Gavroche< / text> 
< text transform =translate（110,249）dx =12dy =。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）
。数据（节点）
 .enter（）。append（text）
 .attr（dx，12）
 .attr（dy，.35em）
 .text（function（d）{return d.name}）; 
  

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

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")

and

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

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

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.

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>

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 });

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>

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 });

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

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