LoginSignup
3

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-20

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3