如何使用D3.js为SVG圆形元素添加内部文本内容

SVG元素遵循后追加的元素层级更高的渲染规则，你需要在圆形绘制完成后追加<text>元素，再通过对齐属性让文本在圆心位置居中显示即可，适配你现有代码的实现方案如下：

完整修改后代码 #

const svg = d3.select("#circle").append("svg").attr("width", 300).attr("height", 300)
const textContent = ['Team']
// 保留原有双层圆形绘制逻辑
svg.append('circle')
  .attr('cx', 100)
  .attr('cy', 75)
  .attr('r', 35)
  .attr('stroke', '#41778D')
  .attr('stroke-width', 5)
  .attr('fill', '#ffffff');

svg.append('circle')
  .attr('cx', 100)
  .attr('cy', 75)
  .attr('r', 27)
  .attr('stroke', '#41778D')
  .attr('fill', '#ffffff');

// 新增居中文本逻辑
svg.append('text')
  .attr('x', 100) // 和圆形cx参数保持一致
  .attr('y', 75) // 和圆形cy参数保持一致
  .attr('text-anchor', 'middle') // 实现水平居中
  .attr('dominant-baseline', 'middle') // 实现垂直居中
  .attr('fill', '#41778D') // 自定义文本颜色
  .attr('font-size', '16px') // 自定义字号，小于内层圆直径即可避免溢出
  .text(textContent[0]);

核心参数说明 #

• text-anchor: middle：让文本的水平中心点和设置的x坐标重合
• dominant-baseline: middle：让文本的垂直中心点和设置的y坐标重合
• 可以根据圆的大小灵活调整字号、字重等样式属性

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