D3.js - 過渡API

D3 過渡會獲取元素選擇集，併為每個元素應用過渡到元素當前定義的一部分。

配置 API

您可以使用以下指令碼配置過渡 API。

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

過渡 API 方法

讓我們詳細瞭解過渡 API 方法。

選擇元素

讓我們詳細討論各種選擇元素。

selection.transition([name]) − 此方法用於返回一個帶有名稱的新選擇過渡。如果未指定名稱，則返回 null。
selection.interrupt([name]) − 此方法用於中斷具有指定名稱的選擇元素的過渡，定義如下。

selection.interrupt().selectAll("*").interrupt();

d3.interrupt(node[, name]) − 此方法用於中斷指定節點上指定名稱的過渡。
d3.transition([name]) − 此方法用於返回一個具有指定名稱的新過渡。
transition.select(selector) − 此方法用於選擇與指定選擇器匹配的第一個元素，並返回對結果選擇集的過渡，定義如下。

transition
   .selection()
   .select(selector)
   .transition(transition)

transition.selectAll(selector) − 此方法用於選擇與指定選擇器匹配的所有元素，並返回對結果選擇集的過渡。定義如下：

transition
   .selection()
   .selectAll(selector)
   .transition(transition)

transition.filter(filter) − 此方法用於選擇與指定過濾器匹配的元素，定義如下。

transition
   .selection()
   .filter(filter)
   .transition(transition)

transition.merge(other) − 此方法用於將過渡與其他過渡合併。定義如下。

transition
   .selection()
   .merge(other.selection())
   .transition(transition)

transition.transition() − 此方法用於在所選元素上返回一個新的過渡。它計劃在當前過渡停止時開始。新的過渡繼承此過渡的名稱、持續時間和緩動。

示例 − 讓我們考慮以下示例。

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

這裡，主體淡化為黃色，並在最後一個過渡開始前五秒鐘啟動。

d3.active(node[, name]) − 此方法用於返回指定節點上具有指定名稱的過渡。

時間方法

讓我們詳細瞭解過渡時間 API 方法。

transition.delay([value]) − 此方法用於將過渡延遲設定為指定值。如果為每個選定元素計算函式，則將其傳遞給當前資料“d”和索引“i”，上下文為當前 DOM 元素。如果未指定值，則返回過渡中第一個（非空）元素的延遲的當前值。定義如下：

transition.delay(function(d, i) { return i * 10; });

transition.duration([value]) − 此方法用於將過渡持續時間設定為指定值。如果未指定值，則返回過渡中第一個（非空）元素的持續時間的當前值。
transition.ease([value]) − 此方法用於調整所選元素的過渡值。緩動函式在動畫的每一幀中被呼叫，並傳遞範圍在 [0, 1] 內的標準化時間“t”。如果未指定值，則返回過渡中第一個（非空）元素的當前緩動函式。

在下一章中，我們將討論 d3.js 中的拖放概念。

列印頁面