有很多示例显示了如何在图形和树的可视化效果中添加标签，但是我可能最简单地从这一示例开始：
您尚未发布代码链接，但我想这
node是指SVG圆形元素的选择。您不能将文本元素添加到圆形元素，因为 圆形元素不是容器；向圆中添加文本元素将被忽略。
通常，您使用G元素为每个节点分组一个圆形元素（或一个图像元素，如上所述）和一个文本元素。生成的结构如下所示：
<g 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 > <circle transform="translate(130,492)" r="4.5"/> <circle transform="translate(110,249)" r="4.5"/> …</g><g > <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 });此技术在“ 移动专利诉讼”示例中使用（带有用于创建白色阴影的附加文本元素）。
