如何使用D3.js在SVG堆叠柱状图的rect元素上方添加文本

实现效果：在每个堆叠分段矩形的正上方显示对应数值，替换示例中的'x'标记

核心注意事项 #

SVG规范中<rect>元素无法直接嵌套<text>子元素，文本标签需要和矩形放在同一个父分组下平级渲染，同时要精准计算坐标保证和对应矩形对齐。

修改后完整代码 #

chartRealModel = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  // 提前保存堆叠系列的分组引用，供后续同时渲染矩形和文本使用
  const seriesGroups = svg.append("g")
    .selectAll("g")
    .data(seriesRealModel)
    .join("g")
      .attr("fill", d => color(d.key));

  // 渲染堆叠柱矩形
  seriesGroups.selectAll("rect")
    .data(d => d)
    .join("rect")
      .attr("x", (d) => xRealModel(d.data.Week))
      .attr("y", d => yRealModel(d[1]))
      .attr("height", d => yRealModel(d[0]) - yRealModel(d[1]))
      .attr("width", xRealModel.bandwidth())
    .append("title")
      .text(d => `${d.key}\n${formatValue(d.data[d.key])}`);

  // 渲染矩形顶部的文本标签
  seriesGroups.selectAll("text")
    .data(d => d)
    .join("text")
      // 水平方向：柱子起始位置+半倍柱宽，配合居中锚点实现水平居中
      .attr("x", d => xRealModel(d.data.Week) + xRealModel.bandwidth() / 2)
      // 垂直方向：取矩形顶部位置，向上偏移3px避免和矩形边框重叠
      .attr("y", d => yRealModel(d[1]) - 3)
      .attr("text-anchor", "middle")
      .attr("font-size", "12px")
      .attr("fill", "#333")
      // 填入需要展示的数值文本，替换原有'x'标记
      .text(d => formatValue(d.data[d.key]));

  svg.append("g")
      .call(xAxisRealModel);

  svg.append("g")
      .call(yAxisRealModel);

  return svg.node();
}

关键改动说明 #

• 拆分原有链式调用逻辑，单独存储系列分组引用，避免将文本错误追加到rect元素内部导致无法渲染
• 文本坐标和对应矩形绑定，水平居中、垂直方向在矩形上方留少量间距，不会遮挡柱体
• 原代码中无实际作用的空行svg.selectAll("rect")可直接删除
• 如果需要完全匹配参考图的视觉效果，只需要调整文本的字号、颜色、纵向偏移数值即可

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