D3.js - 過渡

過渡是專案從一種狀態到另一種狀態的變化過程。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");

列印頁面