【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("+[0, 0]+")") .transition() .duration(6000) .attr("transform", "translate("+[-400, 100]+")") |
関連
関連記事
-
-
【D3.js】 値の正規化(d3.scale)
1var dataset = [12, 159, 0, 5555, 24, 6243, 369, 2525, 9999, 1212]例えば、上記の …
-
-
オープデータを公開している都市に色を塗ってみた。
はやく真っ赤に(あるいは緑に)日本全体が染まればいいのに。 example オー …
-
-
高崎市 平成27年度の主要新規事業予算の一部を視覚化してみた。
example 「高崎市の予算(平成27年度)当初予算の概要及び主要事業」より、 …
-
-
【D3.js】Force-Directed Japan
example 「Force-Directed States of Americ …
-
-
ボロノイ図を使ってラベルの重なり合いを解消する
画像をクリックすると、デモページに飛びます。 見づらいラベル 地図上に沢山のラベ …
-
-
【D3.js】円の外周から外周にラインを引く(暫定)
example * 表示されない場合はリロードしてください。 まぁ、見てのとおり …
-
-
【D3プラグイン】フロアマップを表示する「Floor Plan」
example 「Floor Plan」は図面上にレイヤーを重ねて、ポリンゴンデ …
-
-
WebixとD3.jsを使ってレスポンシブな地図を作成する
Webix Advent Calendar 2014 17日目の記事です。 グラ …
-
-
【D3.js】ラスター地図のパン/ズーム&移動
OpenStreetMap TMS(Tile Map Service)から地図画 …
-
-
【D3.js】トランジション終了時にコールバックを呼ぶ
D3を使って要素を移動したりスタイルを変化させる際、変更(Transition) …
- PREV
- 1936年の日本国立鉄道地図