D3.js v3气泡图：如何让SVG圆形中心的文本可见？

你遇到的核心问题是SVG的<circle>元素不允许包含子元素——虽然Chrome的Elements面板能看到你插入的<text>标签，但这不符合SVG规范，浏览器会直接忽略这个文本节点，所以页面上完全看不到文字。

修复方案：用<g>分组统一管理圆形和文本 #

正确的做法是把圆形和文本放在同一个<g>（分组）元素里，这样既可以统一控制位置，也能让文本正常渲染。具体修改步骤如下：

1. 调整D3的元素创建逻辑 #

原来你可能是直接给圆形添加子文本，现在改成先创建分组，再在分组内分别添加圆形和文本：

// 创建分组元素
var node = svg.selectAll(".node")
  .data(bubble.nodes(classes(root))
  .filter(function(d) { return !d.children; }))
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

// 在分组里添加圆形
node.append("circle")
  .attr("r", function(d) { return d.r; })
  .style("fill", function(d) { return color(d.packageName); });

// 在分组里添加文本
node.append("text")
  .attr("dy", ".3em")
  .style("text-anchor", "middle")
  .style("dominant-baseline", "middle") // 垂直居中
  .text(function(d) { return d.className.substring(0, d.r / 3); });

2. 关键样式说明 #

• text-anchor: middle：让文本在水平方向上以分组的中心为基准对齐
• dominant-baseline: middle：让文本在垂直方向上以分组的中心为基准对齐
• 分组通过transform: translate(d.x, d.y)定位后，圆形和文本默认都处于分组的中心位置，不需要再单独设置偏移量

为什么之前的写法不行？ #

SVG的元素分为不同类型，<circle>属于基本形状元素，是SVG的叶子节点，只能拥有属性，不能包含任何子元素。你强行把<text>插入到<circle>内部，浏览器会解析这个结构但不会渲染文本，这就是Elements面板能看到文本但页面上看不见的核心原因。

内容的提问来源于stack exchange，提问作者user2190690