地図ばかりいじってきましたが、transition
を使い、
図形を遷移させて遊んでみたいと思います。
SVGと、図形の描画
ここは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つです。
transition
: 遷移開始duration(ms)
: 遷移にかける時間をミリ秒で指定ease('linear')
: どのように動かすのか
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秒また遷移という風になります。
サンプル
今回の記事の内容を使い、サンプルを作ってみました。
よければどうぞ。