【JavaScript】D3.js ~ アニメーション表示する ~

関連するメソッド

[1] transition() : アニメーション開始
 # transition : 〔形や状態などが〕推移[移行]する、移り変わり,移行,変遷,変化

[2] duration()   : アニメーションにかかる時間 [ms]
[3] ease()       : アニメーションの動きを変える(以下は、デモサイト)
http://bl.ocks.org/hunzy/9929724
http://dataisfun.org/tutorials/d3-tutorial/tips_and_tricks/d3_transition_eases.html
[4] delay()      : 待機時間[ms]
[5] each()       : transitionの最初と最後に処理を実行する

注意

 * アニメーションする際は、アニメーション前の設定値も重要になってくる(each()を使った方がいい?)

例えば、以下の例だと、設定値を以下のようにしておくと、棒グラフは下から上に伸びるような動きをする。

   アニメーション前(★1)         アニメーション後(★2)
-------------------------------------------------------------------
 「高さ」を「0」             → 「高さ」を「グラフ値に沿った値」
 「y軸位置」を「表示最大値」 → 「y軸位置」を「グラフ値に沿った値」

例0:棒グラフ

http://blogs.yahoo.co.jp/dk521123/35430148.html
より一部抜粋
var barChart = svg.selectAll(".bar")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("fill", function(d) { return d.graphColor; })
  .attr("x", function(d) { return x(d.graphId); })
  .attr("width", x.rangeBand())
  .attr("height", 0) // ★1 アニメーション前の設定値★
  .attr("y", function(d) { return height; }); // ★1 アニメーション前の設定値★

// アニメーション
barChart.transition()
    .delay(function (d, i) { return i * 100; })
    .duration(1000)
    .ease("bounce") // bounceの動きを指定する
    .attr("y", function(d) { return y(d.yVal); }) // ★2 設定値★
    .attr("height", function(d) { return height - y(d.yVal); }); // ★2 設定値★

サンプル

例1:円グラフ

http://blogs.yahoo.co.jp/dk521123/35435961.html
より一部抜粋
g.append("path")
  .attr("d", arc)
  .style("fill", function(d) { return d.data.graphColor; })
  // アニメーション効果
  .transition()
  .duration(1000) // 1秒間でアニメーションさせる
  .attrTween("d", function(d){
    var interpolate = d3.interpolate(
        { startAngle : 0, endAngle : 0 },
        { startAngle : d.startAngle, endAngle : d.endAngle }
    );
    return function(t){
        return arc(interpolate(t));
    }
  });

例2:折れ線グラフ

http://blogs.yahoo.co.jp/dk521123/35430148.html
より一部抜粋
var totalLength = path.node().getTotalLength();

path.attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
  .duration(1000) // アニメーション速度
  .ease("linear")
  .attr("stroke-dashoffset", 0);

参考文献

* よく書かれている
http://dataisfun.org/2014/05/14/?p=242


関連記事

D3.js ~ 入門編 ~

http://blogs.yahoo.co.jp/dk521123/35423681.html