D3.js-移行

遷移とは、アイテムのある状態から別の状態に変化するプロセスです。 D3.jsは、HTMLページでトランジションを実行する* transition（）*メソッドを提供します。この章で移行について学びましょう。

transition（）メソッド

transition（）メソッドはすべてのセレクターで使用でき、移行プロセスを開始します。このメソッドは、attr（）、style（）などのほとんどの選択メソッドをサポートします。しかし、transition（）メソッドの前に呼び出す必要があるappend（）およびdata（）メソッドはサポートしていません。また、duration（）、ease（）などの遷移に固有のメソッドを提供します。単純な遷移は次のように定義できます-

d3.select("body")
   .transition()
   .style("background-color", "lightblue");

遷移は、d3.transition（）メソッドを使用して直接作成し、次のようにセレクタとともに使用できます。

var t = d3.transition()
   .duration(2000);
d3.select("body")
   .transition(t)
   .style("background-color", "lightblue");

最小限の例

遷移の仕組みを理解するための基本的な例を作成しましょう。

次のコードを使用して、新しいHTMLファイル transition_simplel を作成します。

<!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").transition().style("background-color", "lightblue");
      </script>
   </body>
</html>

ここでは、 body 要素を選択し、transition（）メソッドを呼び出して遷移を開始しました。次に、現在の色*白*から*水色*に背景色を切り替えるように指示しました。

ブラウザを更新すると、画面の背景色が白から水色に変わります。背景色をライトブルーからグレーに変更したい場合は、次の遷移を使用できます-

d3.select("body").transition().style("background-color", "gray");

D3js-transition

D3.js-移行

transition（）メソッド

最小限の例