D3.js柱状图文本异常：第三个柱子文本被遮挡问题求助

你遇到的第三个柱子文本被遮挡的问题，主要有两个核心原因：

1. SVG元素的绘制顺序逻辑问题 #

在D3中，SVG元素是按照代码里的添加先后顺序渲染的——后添加的元素会覆盖在之前的元素上方。你在g3组里先添加了矩形（柱子），再添加文本，自然文本会被柱子压在下方遮挡住。前两个组的文本没被遮挡只是因为位置刚好落在柱子上方区域，这种写法其实并不严谨。

2. 数据属性拼写错误 #

看你第三个文本的y坐标计算代码：

.attr("y", yScale(localAdvStats["p_ref_of"]) + yTopMargin)

这里误用了p_ref_of，但你对应的柱子数据是localAdvStats["p_reb_of"]，属性名拼写错误会导致文本的y位置计算偏差，大概率会落到柱子范围内，进一步加重了遮挡问题。

修复方案 #

针对这两个问题，修改g3的代码如下：

//Bar 3
let g3 = svg1.append("g");
// 先添加文本，再添加柱子，确保文本始终在上方
g3.append("text")
  .attr("x", barWidth*3 + xMargin + 10)
  .attr("y", yScale(localAdvStats["p_reb_of"]) + yTopMargin)
  .attr("font-size", "32px")
  .text(localAdvStats["p_reb_of"]);
// 再添加矩形柱子
g3.append("rect")
  .attr("x", barWidth*3 + xMargin)
  .attr("y", yScale(localAdvStats["p_reb_of"]) + yTopMargin)
  .attr("width", barWidth)
  .attr("height", kHeightSVG1-yTopMargin-yBottomMargin-yScale(localAdvStats["p_reb_of"]));

另外建议你统一调整所有柱子的绘制顺序：先添加文本，再添加柱子，这样所有文本都能稳定显示在柱子上方，避免后续再出现类似的遮挡问题，也让代码逻辑更统一。

内容的提问来源于stack exchange，提问作者José Carlos