如何在D3.js堆叠条形图的矩形旁添加年份文本标签

问题根源 #

你现在的问题是把年份文本绑定到了堆叠条形的<rect>元素或单个分组<g>上，导致每个条形都重复显示年份。正确的做法是单独创建一个文本元素集合，绑定年份维度的数据，将文本定位到每组堆叠条形的旁侧。

具体实现步骤 #

假设你的x轴基于年份（xScale是序数比例尺），每组堆叠条形对应一个年份：

1. 提取年份数据
   从原始数据中取出所有唯一的年份值：

const years = data.map(d => d.year); // 假设数据中年份字段为year

2. 创建独立的标签容器
   在SVG里单独加一个<g>元素存放所有年份标签，方便统一管理：

const yearLabelGroup = svg.append('g')
  .attr('class', 'year-labels');

3. 绑定年份数据并生成文本
   给每个年份创建对应文本，利用x轴比例尺计算水平位置，垂直位置根据你的布局调整：

yearLabelGroup.selectAll('text')
  .data(years)
  .enter()
  .append('text')
  .attr('x', d => xScale(d) + xScale.bandwidth() / 2) // 定位到每组条形的中心
  .attr('y', 20) // 比如放在图表顶部，可根据margin值调整
  .attr('text-anchor', 'middle') // 文本居中对齐
  .attr('font-size', '12px')
  .text(d => d);

如果要把年份放在每组条形的左侧或右侧，调整x的计算逻辑：

• 左侧：attr('x', xScale(d) - 10)
• 右侧：attr('x', xScale(d) + xScale.bandwidth() + 10)

4. 核心注意事项
   绝对不要在创建<rect>或堆叠分组<g>的代码块里添加年份文本，必须单独针对年份维度的数据绑定文本元素，这样每个年份只会生成一个标签，不会重复。

错误vs正确写法对比 #

错误写法（导致每个条形都显示年份）：

// 错误：在堆叠分组里嵌套文本，每个分组对应类别而非年份
const barGroups = svg.selectAll('.bar-group')
  .data(stackedData)
  .enter()
  .append('g')
  .attr('class', 'bar-group')
  .append('text')
  .text(d => d.data.year);

正确写法：

// 正确：单独处理年份标签，绑定年份维度数据
const yearLabels = svg.append('g')
  .selectAll('text')
  .data(data.map(d => d.year))
  .enter()
  .append('text')
  .attr('x', d => xScale(d) + xScale.bandwidth()/2)
  .attr('y', margin.top - 10) // 放在图表顶部区域
  .attr('text-anchor', 'middle')
  .text(d => d);

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