D3.js-アニメーション

D3.jsは、トランジションによるアニメーションをサポートしています。トランジションを適切に使用してアニメーションを作成できます。トランジションは限定された形式ですKey Frame Animation開始と終了の2つのキーフレームのみ。開始キーフレームは通常、DOMの現在の状態であり、終了キーフレームは、指定した属性、スタイル、およびその他のプロパティのセットです。トランジションは、開始ビューに依存する複雑なコードなしで、新しいビューにトランジションするのに適しています。

Example −「transition_color.html」ページの次のコードについて考えてみましょう。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.select("body").style("background-color", "lightblue") 
         // make the background-color lightblue.transition()
         .style("background-color", "gray");
         // make the background-color gray
      </script>
   </body>
</html>

ここで、ドキュメントの背景色が白からライトグレー、そしてグレーに変わりました。

duration（）メソッド

duration（）メソッドを使用すると、プロパティの変更を瞬時にではなく、指定した期間にわたってスムーズに行うことができます。次のコードを使用して、5秒かかる遷移を作成しましょう。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.selectAll("h3").transition().style("color","green").duration(5000);
      </script>
   </body>
</html>

ここでは、遷移がスムーズかつ均等に発生しました。次の方法を使用して、RGBカラーコード値を直接割り当てることもできます。

d3.selectAll("h3").transition().style("color","rgb(0,150,120)").duration(5000);

これで、各色番号はゆっくり、スムーズ、そして均等に0から150になります。開始フレーム値から終了フレーム値までの中間フレームを正確にブレンドするために、D3.jsは内部補間メソッドを使用します。構文は以下のとおりです-

d3.interpolate(a, b)

D3は、次の補間タイプもサポートします-

interpolateNumber −数値をサポートします。
interpolateRgb −サポートカラー。
interpolateString −サポート文字列。

D3.jsは、適切な補間メソッドの使用を処理します。高度なケースでは、補間メソッドを直接使用して、目的の結果を得ることができます。必要に応じて、新しい内挿法を作成することもできます。

delay（）メソッド

delay（）メソッドを使用すると、一定期間後に遷移を実行できます。「transition_delay.html」の次のコードについて考えてみます。

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3> Simple transitions </h3>
      <script>
         d3.selectAll("h3").transition()
            .style("font-size","28px").delay(2000).duration(2000);
      </script>
   </body>
</html>

移行のライフサイクル

移行には4段階のライフサイクルがあります-

移行が予定されています。
移行が始まります。
遷移が実行されます。
移行は終了します。

これらを1つずつ詳しく見ていきましょう。

移行が予定されています

トランジションは、作成時にスケジュールされます。電話するときselection.transition、移行をスケジュールしています。これは私たちが呼ぶときでもありますattr(), style() およびその他の遷移方法を使用して、終了キーフレームを定義します。

移行が始まります

遷移は、遷移がスケジュールされたときに指定された遅延に基づいて開始されます。遅延が指定されていない場合、遷移はできるだけ早く開始されます。これは通常、数ミリ秒後です。

遷移に遅延がある場合、開始値は遷移の開始時にのみ設定する必要があります。開始イベントを聞くことでこれを行うことができます-

d3.select("body")
   .transition()
   .delay(200)
   .each("start", function() { d3.select(this).style("color", "green"); })
   .style("color", "red");

トランジションラン

遷移が実行されると、0から1の範囲の遷移の値で繰り返し呼び出されます。遅延と期間に加えて、遷移はタイミングの制御を容易にします。緩和すると、スローインやスローアウトなどの時間が歪められます。一部のイージング関数は、一時的に1より大きいまたは0より小さいtの値を与える場合があります。

移行は終了します

遷移の終了時間は常に正確に1であるため、遷移が終了したときに終了値が正確に設定されます。遷移は、遅延と期間の合計に基づいて終了します。遷移が終了すると、終了イベントがディスパッチされます。