D3.js柱状图动画方向修正：实现从下往上生长效果求助

嘿，我看了你的代码和动画效果，问题出在初始的y属性和动画阶段的属性设置上，咱们一步步调整就能搞定从下往上生长的效果：

问题根源 #

D3的坐标系是y轴向下递增的——SVG顶部是y=0，底部是y=svgHeight。你当前的代码里，初始把柱子的y设为this.svgHeight - yScale(d)，动画只增加height，这就导致柱子从顶部往下延伸。要实现从下往上生长，得让柱子初始时底部对齐x轴，再向上“长高”。

具体修改步骤 #

1. 修正SVG高度的拼写错误
   你代码里把height拼写成了heigth，这会导致SVG高度不生效，先改过来：

   var svg = d3
     .select('svg')
     .attr('width', this.svgWidth)
     .attr('height', this.svgHeight); // 这里把heigth改成height
   

2. 调整矩形的初始位置
   把柱子的初始y值设为SVG的底部（x轴位置），height保持0：

   .attr('y', this.svgHeight) // 初始时柱子底部对齐x轴
   .attr('height', 0)
   

3. 修改动画逻辑，同时更新y和height
   动画时不仅要增加height，还要把y向上移动到柱子顶部的位置，这样柱子就会从下往上生长：

   var temp = d3
     .selectAll('rect')
     .transition()
     .duration(1500)
     .attr('height', (d: any) => yScale(d))
     .attr('y', (d: any) => this.svgHeight - yScale(d)); // 动画时y轴向上移动，配合height增长
   

修改后的完整关键代码片段 #

这里是调整后的buildSvg里的矩形创建和动画部分：

var barchart = svg
  .selectAll('rect')
  .data(this.dataset)
  .enter()
  .append('rect')
  .attr('class', (d: any, i: any) => { return 'rect' + (i + 1); })
  .attr('fill', (d: any, i: any) => { return this.colors[i]; })
  .attr('y', this.svgHeight) // 初始位置在x轴
  .attr('height', 0) // 初始高度为0
  .attr('width', this.barWidth - this.barPadding)
  .attr('transform', (d: any, i: any) => {
    var translatenum = [this.barWidth * i, 0];
    return 'translate(' + translatenum + ')';
  })
  // 鼠标事件部分保持不变...

// 动画部分修改
var temp = d3
  .selectAll('rect')
  .transition()
  .duration(1500)
  .attr('height', (d: any) => yScale(d))
  .attr('y', (d: any) => this.svgHeight - yScale(d));

原理说明 #

因为D3的y轴向下，所以x轴在this.svgHeight位置。初始时柱子底部贴在x轴（y=this.svgHeight），高度为0；动画时，height逐渐增加到对应数据的刻度值，同时y轴位置向上移动this.svgHeight - yScale(d)，这样柱子就会从下往上“长”到目标高度，正好符合你的需求。

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