水平D3棒グラフをアニメーション化する方法は？

Question

私は現在、このD3棒グラフで作業しています：http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306左から右に塗りつぶすために、ページの読み込み時にチャートをアニメーション化したいと思います。 .transformの他のスニペットを見たことがありますが、アニメーションを自分のチャートに正しく追加する方法はわかりません。誰も見ている気がしますか？私はローカル（私は基本的に私のWebアプリケーションにインストールされている同じグラフを持っている）を変更するたびに、グラフが完全に消え、私はどこかの構文エラーがあるように見えます。

Answer 1

左から右へと移行するための、あなただけのその最終値に、transition()後、ゼロに初期の幅を設定する必要があります。

bar.append("rect") 
     .attr("transform", "translate("+labelWidth+", 0)") 
     .attr("height", barHeight) 
     .attr("width", 0)//this is the initial value 
     .transition() 
     .duration(1500)//time in ms 
     .attr("width", function(d){ 
      return scale(d.value); 
     });//now, the final value 

ここではフィドルです：https://jsfiddle.net/8v88gwqn/

も、あなたは個別に各バーを移行するために遅延を使用することができます。ここでは

bar.append("rect") 
     .attr("transform", "translate("+labelWidth+", 0)") 
     .attr("height", barHeight) 
     .attr("width", 0) 
     .transition() 
     .duration(1500) 
     .delay(function(d,i){ return i*250})//a different delay for each bar 
     .attr("width", function(d){ 
      return scale(d.value); 
     }); 

は遅延とフィドルです：https://jsfiddle.net/8v88gwqn/1/