D3堆叠柱状图数据展示异常求助（附Plunker示例）

这个问题的核心是堆叠柱状图的坐标轴方向或堆叠基线搞反了，导致数值最小的cherries反而呈现为最高的柱子。

为什么会出现这个问题？ #

通常堆叠柱状图的逻辑是从y轴的**0基线（底部）**向上累加数值，但如果你的代码中存在以下两种错误之一，就会导致堆叠方向颠倒：

• 错误反转了y轴的定义域/值域，让0值对应图表顶部、最大值对应底部；
• 计算柱子的y坐标和高度时，搞反了堆叠层的起始/结束值。
  最终数值小的层会从顶部向下延伸，看起来反而比数值大的层"更高"。

具体修正步骤 #

假设你使用的是D3.js（实现堆叠柱状图的常用库），结合你的数据var data = [{ day: 'Mon', apricots: 150, blueberries: 20, cherries: 15 }]，可以按以下方式修正：

1. 正确设置y轴比例尺

y轴的定义域要覆盖从0到数据总和的最大值（150+20+15=185），值域要对应图表底部到顶部的像素位置：

// 计算数据总和，获取最大值
const totalValues = data.map(d => d.apricots + d.blueberries + d.cherries);
const maxTotal = d3.max(totalValues);

// 定义y轴比例尺
const y = d3.scaleLinear()
  .domain([0, maxTotal]) // 定义域：从0到数据总和的最大值
  .range([height, 0]);   // 值域：图表底部（height）到顶部（0）

2. 正确计算堆叠柱子的位置与高度

使用D3的stack()方法生成堆叠数据后，每个层的数据格式为[lower, upper]（lower是层的起始值，upper是结束值）。结合上面的y轴设置，柱子的属性要这样写：

// 生成堆叠数据，按数值从大到小排列层级
const stack = d3.stack()
  .keys(['apricots', 'blueberries', 'cherries']);
const stackedData = stack(data);

// 绘制堆叠柱子
svg.selectAll('.bar-group')
  .data(stackedData)
  .enter()
  .selectAll('rect')
  .data(d => d)
  .enter()
  .append('rect')
  .attr('x', d => x(d.data.day))
  .attr('y', d => y(d[1])) // 柱子顶部的y坐标（对应upper值）
  .attr('height', d => y(d[0]) - y(d[1])) // 柱子高度：底部y值减去顶部y值
  .attr('width', x.bandwidth())
  .attr('fill', (d, i) => colorScale(i));

3. （可选）调整堆叠顺序

如果想让数值大的层在最底部，保持keys()的顺序为['apricots', 'blueberries', 'cherries']即可；如果需要反转堆叠顺序，把keys的顺序反过来就行。

验证效果 #

修正后，apricots（150）会作为最底层的柱子从图表底部向上延伸，blueberries（20）叠加在它上方，cherries（15）作为最顶层的小柱子高度最矮，完全符合数值大小的逻辑。

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