2017-10-29 22 views
1

は、私がここにplunkerを持っています。角度D3棒グラフのアニメーション

バーの高さを下から上にアニメーションしたいとします。

私の例では、それらは上から下にアニメーション化されています。

これは単純な修正だと確信していますが、私は固執しています。

private drawBars() { 
     this.g.selectAll(".bar") 
      .data(this.data) 
      .enter() 
      .append("rect") 
      .attr("class", "bar") 
      .attr("x", (d) => this.x(d.letter)) 
      .attr("width", this.x.bandwidth()) 
      .attr("height", 0) 
      .transition() 
      .duration(200) 
      .delay((d, i) => { 
       return i * 50; 
      }) 
      .attr("y", (d) => this.y(d.frequency)) 
      .attr("height", (d) => this.height - this.y(d.frequency)) 
      .attr('fill', (d, i)=>{ 
       return this.colors[i] 
      }); 
    } 

答えて

1

y属性が移行前を指定していないがあります。そのため、yは、デフォルト値である0を仮定しています。これはSVGの先頭です。

したがって、あなただけのtransition()を呼び出す前にy属性を設定する必要があります。https://plnkr.co/edit/xXBwGpu0zHIjj9GAzanb?p=preview

:ここ

.attr("y", this.height) 

が更新plunkerです