使用D3+React绘制人口金字塔时Y轴标签对齐问题求助

问题核心在于SVG文本元素的默认对齐规则，以及你未计算柱子的垂直中线位置：

问题原因 #

1. SVG的<text>默认采用基线对齐（baseline），你直接将文本的y值设为柱子的顶部坐标（yScale(k)），导致文本基线与柱子顶部重合，视觉上文本偏上。
2. 柱子的垂直中线位置需要通过yScale(k) + yScale.bandwidth()/2计算，这才是标签应该对齐的基准点。

修复方案 #

修改React中的文本标签代码，同时调整y坐标和垂直对齐属性：

<g>
  {Array.from(ageGroups, ([k]) => (
    <text
      key={`yTick-${k}`}
      x={xStart - 12}
      {/* 计算柱子垂直中线作为文本y坐标 */}
      y={(yScale(k) as number) + yScale.bandwidth() / 2}
      textAnchor="end"
      {/* 设置文本垂直居中对齐 */}
      dominantBaseline="middle"
      stroke="currentColor"
    >
      {k}
    </text>
  ))}
</g>

为什么之前的方法无效 #

你尝试的嵌套SVG、调整viewBox等操作，都没有触及文本对齐的核心规则——SVG文本的垂直对齐方式和坐标基准点。微调yScale最小值只是整体偏移，无法实现每个标签与对应柱子的精准居中对齐。

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