如何在D3堆叠条形图的每个柱形内部显示数据标签

问题核心原因 #

• SVG 规范中<rect>元素不支持嵌套子元素，原代码中将<text>直接追加到<rect>节点下，属于无效DOM结构，因此文本不会被渲染
• 原标签位置未做居中处理，即使渲染也会出现偏移、和柱形重叠不可见的问题

修复方案 #

1. 拆分矩形与文本的绘制逻辑 #

将矩形生成代码和文本生成代码分开，独立绑定堆叠数据绘制文本节点

2. 调整文本样式与位置 #

设置文本居中对齐、偏移到柱形中心位置，同时配置高对比度的文本颜色

修复后的核心代码段 #

// Show the bars
const barGroups = svg.append("g")
    .selectAll("g")
    .data(stackedData)
    .enter().append("g")
    .attr("fill", function(d) { return color(d.key); });

// 单独绘制矩形
barGroups.selectAll("rect")
    .data(function(d) { return d; })
    .enter().append("rect")
    .attr("x", function(d) { return x(d.data.Year); })
    .attr("y", function(d) { return y(d[1]); })
    .attr("height", function(d) { return y(d[0]) - y(d[1]); })
    .attr("width", x.bandwidth())
    .attr("class", "bar");

// 单独绘制文本标签
barGroups.selectAll("text")
    .data(function(d) { return d; })
    .enter().append("text")
    .attr("x", function(d) { return x(d.data.Year) + x.bandwidth() / 2; })
    .attr("y", function(d) { return y(d[1]) + (y(d[0]) - y(d[1])) / 2; })
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("fill", "#fff")
    .attr("font-size", "12px")
    // 此处输出当前分段的数值，如需显示累计值可改为return d[1]
    .text(function(d) { return d[1] - d[0]; });

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