2018-03-14D3のアニメーション用API、transitionと一緒に用いるeaseを紹介します。D3でのアニメーションの設定は下記です。500);この設定では、選択した”circle”がcx=500の位置に750ミリ秒かけて移動します。D3のメソッドeaseを用いるとエフェクトを変更することができます。500);d3.easeBounceInOutはエフェクトを変化させるための関数で、次の種類が用意されています。サンプルとしてcircleに時間変化のアニメーションを、グラフに時間と変化量の関係を表示します。d3.easePolyInOutd3.easePolyとd3.easePolyInOutは同じ関数です。d3.easePolyIn、d3.easePolyOut、d3.easePoly、d3.easePolyInOutはd3.easePoly.exponent(2);1d3.easePoly.exponent(2);のように、exponentメソッドを使って曲がり具合を変更できます。デフォルトは3で1の場合は直線になります。d3.easeElasticOutd3.easeElasticInOutd3.easeElasticIn、d3.easeElastic、d3.easeElasticOut、d3.easeElasticInOutはd3.easeElastic.amplitude(1).period(0.3);1d3.easeElastic.amplitude(1).period(0.3);のようにamplitudeメソッドを使って振幅を、periodメソッドを使って周期を変更できます。デフォルトは1と0.3です。d3.easeBackInOutd3.easeBackIn、d3.easeBackOut、d3.easeBack、d3.easeBackInOutはd3.easeBack.overshoot(1.70158);1d3.easeBack.overshoot(1.70158);のようにovershootメソッドを使ってオーバーシュート量を変更できます。デフォルトは1.70158です。100);のように複数を続けて呼び出すこともできます。組み合わせれば様々なアニメーションが可能です。棒グラフをアニメーションとともに並び替える方法を紹介します。exit)D3の基本、dataの使い方を紹介します。使い方D3のドラッグイベントについて解説します。使い方D3の範囲選択の使い方を紹介します。TOP%d人のブロガーが「いいね」をつけました。