GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

CSS D3v3

【D3.js】3D風のラインチャートを作る

投稿日:

css 3d line chart

example

D3.jsを使って3D風の線グラフをつくってみました。
手前から奥に向かって進むようなアニメーションになっています。

解説

実は、たいしたことは何もしていません。
D3.jsで普通に線グラフを描き、cssのtransformプロパティをsvg要素に適用して奥行きを出しているだけです。

アニメーションはD3.jsのトランジション機能でチャートを描画したg要素のx軸を変化させることで、奥に進むような表現を実装しています。

関連

【D3.js】おさらい2回目 線グラフ

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。