D3.js-移行
遷移は、アイテムのある状態から別の状態に変化するプロセスです。D3.jsはtransition()HTMLページで遷移を実行するメソッド。この章では、移行について学びましょう。
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_simple.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").transition().style("background-color", "lightblue");
</script>
</body>
</html>ここでは、 body要素を作成し、transition（）メソッドを呼び出して遷移を開始しました。次に、現在の色から背景色を移行するように指示しました。white に light blue。
ここで、ブラウザを更新すると、画面上で背景色が白から水色に変わります。背景色を水色から灰色に変更したい場合は、次のトランジションを使用できます-
d3.select("body").transition().style("background-color", "gray");