d3.jsを使用してアニメーション棒グラフを作成しようとしています。この例のように棒を1本ずつ表示したいです。http://nvd3.com/ghpages/multiBar.html同様の動作を作成することはできましたが、モーションはバーの高さから始まり、バーを x 軸に向かって構築します。ただし、例のように、モーションは x 軸から始まり、バーの高さまで進むようにしたいです。
私のコードのかなり簡略化されたバージョン:http://jsfiddle.net/gorkem/ECRMd/
ご協力いただければ幸いです
ベストアンサー1
座標系の原点は左上からなので、「y」の値は各バーの上部に固定されます。「y」の値が固定され、「高さ」が増加すると、バーが下に向かって伸びるように見えます。バーを下から伸ばすには、「y」と「高さ」の両方を同時に遷移させる必要があります。
これがあなたが探しているものであるはずです。変更したのは 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) から開始しました。次に、遷移時に 'height' (y(d.value)) を増やし、同じ割合で 'y' (h - y(d.value)) を減らします。これにより、バーの下部が軸に固定されます。
お役に立てれば！