d3.jsを使用してアニメーション化された棒グラフを作成しようとしています。この例のようにバーが1つずつ表示されるようにします。http://nvd3.com/ghpages/multiBar.html私は同様の動作を作成することができましたが、モーションはバーの高さから始まり、x軸に向かってバーを作成しますが、モーションをx軸から開始し、例のようにバーの高さに移動します。私のコードのD3.jsトランジション
多くの単純化されたバージョン：座標系の原点は左上、「Y」値がで固定されているからであるため、すべてのヘルプははるか
理解されるであろう http://jsfiddle.net/gorkem/ECRMd/
各バーの上部。 'y'の値が固定されていて、 '高さ'が増加している場合は、棒グラフが下がったように見えます。棒が下から成長するようにするには、 'y'と 'height'の両方を同時に変更する必要があります。
これはあなたが探しているはずのもので、私は2行だけ変更しました。
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d, i) { return x(i) - .5; })
.attr("y", function(d) { return h - .5; }) //new----
.attr("width", w)
.transition().delay(function (d,i){ return i * 300;})
.duration(300)
.attr("height", function(d) { return y(d.value); })
.attr("y", function(d) { return h - y(d.value) - .5; }); //new-----
グラフの下に「y」の値が表示されています（h-0.5）。そして、あなたがトランジションするとき、同じ高さで '高さ'（y（d.value））を増やし、 'y'（h - y（d.value））を減らします。これは、バーの底を軸に固定する効果があります。
希望すると便利です。
xスケールは、あなたがバーを下（下= SVG高さ）から上方に構築する必要が（期待するものに後ろ向きであることを忘れないでください。入力した上でバーをアニメーション化への移行を使用してください。
の例をどのような私はあなたがここで見つけることができます達成しようとしていると思う：多くのことを http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1
すべてのベスト、
ジム
おかげで、私は何か版で問題が発生した –
完全に働きました私はまた、遷移（）の前に高さを0に設定するまでこれに似ています。 .attr（ "height"、function（d）{return 0;}） 'のようなものです。 – kendlete