D3.js - Transitions API
D3 Transitions 為每個元素選擇元素; 它將轉換應用於元素當前定義的一部分。
配置 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 方法
讓我們詳細介紹 Transition 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 元素。如果未指定值，則返回轉換中第一個（非 null）元素的延遲的當前值。它定義如下，
transition.delay(function(d, i) { return i * 10; });
-
transition.duration（[value]） - 此方法用於將轉換持續時間設定為指定值。如果未指定值，則返回轉換中第一個（非 null）元素的持續時間的當前值。
-
transition.ease（[value]） - 此方法用於簡化所選元素的轉換值。為動畫的每個幀呼叫緩動函式，並在[0,1]範圍內傳遞標準化時間’t’。如果未指定值，則返回轉換中第一個（非 null）元素的當前緩動函式。
在下一章中，我們將討論 d3.js 中的拖放概念。