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

2016/03/04 - CSS, d3.js

Search Tweet
409

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

解説

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

#chart {
    width: 900px;
    height:500px;
    transform: perspective( 600px ) rotateY( 45deg );
}

#chart {

width: 900px;

height:500px;

transform: perspective( 600px ) rotateY( 45deg );

}

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

//ステージを奥に向かって進むようにアニメーション    
stage.attr("transform", "translate("+[0, 0]+")")
    .transition()
    .duration(6000)
    .attr("transform", "translate("+[-400, 100]+")")

//ステージを奥に向かって進むようにアニメーション

stage.attr("transform", "translate("+[0, 0]+")")

.transition()

.duration(6000)

.attr("transform", "translate("+[-400, 100]+")")

関連

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

関連

- CSS, d3.js

Search Tweet
409

【D3.js】値の正規化(d3.scale)

var dataset = [12, 159, 0, 5555, 24, 6243, 369, 2525, 9999, 1212]

1	var 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 １７日目の記事です。グラ …

: 【D3.js】ラスター地図のパン／ズーム＆移動

OpenStreetMap TMS(Tile Map Service)から地図画 …

: 【D3.js】トランジション終了時にコールバックを呼ぶ

D3を使って要素を移動したりスタイルを変化させる際、変更(Transition) …

PREV: 1936年の日本国立鉄道地図

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

解説

関連

関連

関連記事