Edited at

d3.jsで棒グラフを描く その4(アニメーション)

More than 1 year has passed since last update.


はじめに

d3.jsで棒グラフを描く その3(軸)の続きです。

前回作成したプログラムにアニメーションを追加します。


アニメーションの追加

transitionとdurationを使って、アニメーション棒グラフの描画をアニメーションします。棒グラフの高さを0に設定し、transitionとdurationを挟むと、以下に設定した状態にアニメーションします。

svg.selectAll("rect")

.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
// dがデータ、iが添え字
// 棒グラフのx開始点をずらす
// 棒グラフがくっつかないようにする
return i * (BAR_W + 1) + W_PADDING;
})
// アニメーションのために追加
.attr("height", 0) // 高さ0
.attr("y", H + H_PADDING) // yがの位置
.transition() // アニメーションする
.duration(500) // 500ミリ秒かけて以下の状態にする
// 追加ここまで
.attr("y", function(d, i) {
// 開始点を全体高さから高さを引いた値とする
return H - scale(d[1]) + H_PADDING;
})
.attr("width", BAR_W)
.attr("height", function(d) {
// データ配列の1コ目を高さとする
return scale(d[1]);
})
// グラフの色設定
.attr("style", "fill:turquoise");

ここまでを実行

delayを使うと、棒グラフごとに描画タイミングをずらすことができます。もっといい感じになります。

svg.selectAll("rect")

.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
// dがデータ、iが添え字
// 棒グラフのx開始点をずらす
// 棒グラフがくっつかないようにする
return i * (BAR_W + 1) + W_PADDING;
})
// アニメーションのために追加
.attr("height", 0) // 高さ0
.attr("y", H + H_PADDING) // yが0
.transition() // アニメーションする
.duration(500) // 500ミリ秒かけて以下の状態にする
.delay(function(d, i) {
return i * 50; // アニメーションの開始を50ミリ秒ずつずらす
})
// 追加ここまで
.attr("y", function(d, i) {
// 開始点を全体高さから高さを引いた値とする
return H - scale(d[1]) + H_PADDING;
})
.delay(function(d, i) {
return i * 50;
})
.attr("width", BAR_W)
.attr("height", function(d) {
// データ配列の1コ目を高さとする
return scale(d[1]);
})
// グラフの色設定
.attr("style", "fill:turquoise");

ここまでを実行

以上で、d3.jsを使った棒グラフ描画を終わります。

沈黙シリーズで一番評価が高いのは「沈黙の戦艦」で、一番評価が低いのは「沈黙の激突」ということが棒グラフで見やすく、分かりました。