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

はじめに

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を使った棒グラフ描画を終わります。
沈黙シリーズで一番評価が高いのは「沈黙の戦艦」で、一番評価が低いのは「沈黙の激突」ということが棒グラフで見やすく、分かりました。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.