d3节点标签

Question

我一直在使用这个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文本对象并根据圆的半径坐标确定需要放置的坐标？从另外两个例子来看,似乎d3已经以某种方式解决了这个问题.我只是不知道调用/设置的正确属性.

Answer 1

有很多示例显示如何向图形和树形可视化添加标签,但我可能从这个最简单的开始:

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

您尚未发布指向您的代码的链接,但我猜这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 });

该技术用于移动专利套装示例(具有用于创建白色阴影的附加文本元素).