D3.js - 轉換

Created: November-04, 2018

過渡是從一個專案的一個狀態轉換到另一個狀態的過程。D3.js 提供了一個 transition() 方法來在 HTML 頁面中執行轉換。讓我們在本章中瞭解轉換。

`transition()` 方法

transition() 方法可用於所有選擇器，並啟動轉換過程。此方法支援大多數選擇方法，如-attr()，style() 等。但是，它不支援 append() 和 data() 方法，這些方法需要在 transition() 方法之前呼叫。此外，它提供了特定於轉換的方法，如 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() 方法開始轉換。然後，我們已指示背景顏色從目前的顏色- 白色變換至淡藍色。

現在，重新整理瀏覽器並在螢幕上，背景顏色從白色變為淺藍色。如果我們想將背景顏色從淺藍色更改為灰色，我們可以使用以下轉換-

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

transition() 方法

一個最小例項

`transition()` 方法