D3.js v4/v5 アニメ―ション使い方 エフェクト一覧(transition, ease)
D3のアニメーション用API、transitionと一緒に用いるeaseを紹介します。D3でのアニメーションの設定は下記です。
|
1 2 3 4 |
d3.select("circle") .transition() .duration(750) .attr("cx", 500); |
この設定では、選択した”circle”がcx=500の位置に750ミリ秒かけて移動します。D3のメソッドeaseを用いるとエフェクトを変更することができます。
|
1 2 3 4 5 |
d3.select("circle") .transition() .duration(750) .ease(d3.easeBounceInOut) .attr("cx", 500); |
d3.easeBounceInOutはエフェクトを変化させるための関数で、次の種類が用意されています。サンプルとしてcircleに時間変化のアニメーションを、グラフに時間と変化量の関係を表示します。
関数一覧
d3.easeLinear
d3.easePolyIn
d3.easePolyOut
d3.easePoly, d3.easePolyInOut
d3.easePolyとd3.easePolyInOutは同じ関数です。どちらかを用います。また、d3.easePolyIn、d3.easePolyOut、d3.easePoly、d3.easePolyInOutは
|
1 |
d3.easePoly.exponent(2); |
のように、exponentメソッドを使って曲がり具合を変更できます。デフォルトは3で1の場合は直線になります。
d3.easeQuadIn
d3.easeQuadOut
d3.easeQuad, d3.easeQuadInOut
d3.easeCubicIn
d3.easeCubicOut
d3.easeCubic, d3.easeCubicInOut
d3.easeSinIn
d3.easeSinOut
d3.easeSin, d3.easeSinInOut
d3.easeExpIn
d3.easeExpOut
d3.easeExp, d3.easeExpInOut
d3.easeCircleIn
d3.easeCircleOut
d3.easeCircle, d3.easeCircleInOut
d3.easeElasticIn
d3.easeElastic, d3.easeElasticOut
d3.easeElasticInOut
d3.easeElasticIn、d3.easeElastic、d3.easeElasticOut、d3.easeElasticInOutは
|
1 |
d3.easeElastic.amplitude(1).period(0.3); |
のようにamplitudeメソッドを使って振幅を、periodメソッドを使って周期を変更できます。デフォルトは1と0.3です。
d3.easeBackIn
d3.easeBackOut
d3.easeBack, d3.easeBackInOut
d3.easeBackIn、d3.easeBackOut、d3.easeBack、d3.easeBackInOutは
|
1 |
d3.easeBack.overshoot(1.70158); |
のようにovershootメソッドを使ってオーバーシュート量を変更できます。デフォルトは1.70158です。
d3.easeBounceIn
d3.easeBounce, d3.easeBounceOut
d3.easeBounceInOut
まとめ
transitionは
|
1 2 3 4 5 6 7 8 9 |
d3.select("circle") .transition() .duration(750) .ease(d3.easeBounceInOut) .attr("cx", 500); .transition() .duration(500) .ease(d3.easeElasticInOut) .attr("cx", 100); |
のように複数を続けて呼び出すこともできます。組み合わせれば様々なアニメーションが可能です。