d3.jsな日々

d3.jsでデータ可視化する際の覚書です

Transitionの基本

アニメーションを実現するのが、.transition()。
基本構文としては、

.transition()
.duration(####)
.ease($$$$)
.attr(...) //変更したい属性
.......

となる。ここで、
####は、トランジションの時間(mSec)
$$$$は、トランジションの種類で、次のように基本種類+オプションの文字列で指定する。

基本種類
linear - リニア
poly(k) - k次関数
quad - 2次 = poly(2)
cubic - 3次 = poly(3).
sin - Sin関数
exp - 指数関数
circle - 1/4円
elastic(a, p) - オーバーシュート付きの弾性変形
back(s) - 駐車スペースへのバックをシミュレート
bounce - 跳ね返りをシミュレート

オプショ
in -正方向
out - 逆方向
in-out - 正→逆
out-in - 逆→正


さらに、.transition()と組み合わせてよく使うオプションには次がある。
.delay(####) トランジションの開始を####mSec遅らせる
.each("start", function(){};)
.each("end", function(){};)
.remove() トランジション終了後に削除する