堆叠条形图高度过渡动画需求：实现从底部轴向上动画

你的问题出在初始状态的属性设置上——当前代码让矩形从顶部（y=0）向下拉伸，而不是从底部基线向上展开。咱们调整一下初始状态和过渡逻辑就能搞定：

修改后的代码 #

let layersBar = layersBarArea.selectAll('.layer').data(stackedSeries) 
 .enter() 
 .append('g') 
 .attr('class', 'layer') 
 .style('fill', (d, i) => colors[i]); 

layersBar.selectAll('rect') 
 .data(d => d) 
 .enter() 
 .append('rect') 
 // 初始状态：把矩形定位在底部基线，高度设为0（完全隐藏）
 .attr('y', y(0)) 
 .attr('height', 0) 
 // 先设置好x和宽度，避免这些属性参与动画
 .attr('x', d => x(d.data.date)) 
 .attr('width', x.bandwidth())
 .transition() 
 .duration(400) 
 // 过渡到目标位置和高度：从底部向上展开
 .attr('y', d => y(d[1])) 
 .attr('height', d => y(d[0]) - y(d[1]));

关键逻辑说明 #

• 初始状态调整：
  把初始的y值设为y(0)，这是堆叠条形图的底部基线位置（对应y轴的0值）；同时将初始height设为0，让矩形一开始完全隐藏在基线位置。
• 过渡动画逻辑：
  过渡时，把y从基线位置移动到当前堆叠层的顶部位置y(d[1])，同时把height从0增加到层的实际高度y(d[0]) - y(d[1])（因为D3的y轴通常是向上数值减小，所以用底部值减顶部值得到高度）。
• 优化细节：
  把x和width的设置移到过渡之前，避免这些属性产生不必要的动画，让动画只聚焦在垂直方向的展开效果上。

这样修改后，你的堆叠条形图就会从底部轴向上平滑展开啦！

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