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 中的拖放概念。