D3.jsのtransitionで遊んでみる

地図ばかりいじってきましたが、transitionを使い、
図形を遷移させて遊んでみたいと思います。

ここはD3の基本的なところです。
まずはいつも通り、svg要素を作成します。

// svg
var svg = d3.select('body').append('svg').attr({width: 500, height: 500});

次に図形を追加しましょう。
今回はcircle要素を追加します。

// circle
var circle = svg.append('circle')
  .attr({
    cx: 100,
    cy: 100,
    r: 20,
    fill: 'red'
  });

これで、X座標100、Y座標100に半径20で赤色の円が描画できます。

使うのは3つです。

easeは何パターンかあるのですが、詳しくはこちらのEasingの項を参照。

// transition
circle.transition()
  .duration(1000)
  .ease('linear')
  .attr({
    cx: 200,
    cy: 200,
    r: 50,
    fill: 'blue'
  });

例えば、このように書いたとすると、
1秒間かけて、X,Y = (200, 200)に移動させつつ、半径を50、色を青にする。
となります。

遷移が終わった時に何かしたいと思うと、このように書くことができます。

// 上記コードの続き
  .each('end', function () {
    d3.select(this).remove();
  });

こうすると、遷移が終わった段階で、遷移させていた図形を削除することが可能です。

さらに、transitionは続けて書くことができます。

circle.transition()
  .duration(1000)
  .attr(/* 何か */)
  .transition()
  .duration(500)
  // 略

この例だと、1秒かけて遷移、その後0.5秒また遷移という風になります。

今回の記事の内容を使い、サンプルを作ってみました。
よければどうぞ。

デモはこちら
ソースはこちら

typeof Diary