【D3.js】3D風のラインチャートを作る
D3.jsを使って3D風の線グラフをつくってみました。
手前から奥に向かって進むようなアニメーションになっています。
解説
実は、たいしたことは何もしていません。
D3.jsで普通に線グラフを描き、cssのtransformプロパティをsvg要素に適用して奥行きを出しているだけです。
|
1 2 3 4 5 |
#chart { width: 900px; height:500px; transform: perspective( 600px ) rotateY( 45deg ); } |
アニメーションはD3.jsのトランジション機能でチャートを描画したg要素のx軸を変化させることで、奥に進むような表現を実装しています。
|
1 2 3 4 5 |
//ステージを奥に向かって進むようにアニメーション stage.attr("transform", "translate(100, 100)") .transition() .duration(6000) .attr("transform", "translate(-400, 100)") |
