by Observable

外觀

選取元素 ​

轉場是透過 選取 衍生而來的，方法是使用 selection.transition。您也可以使用 d3.transition 在文件根元素上建立轉場。

selection.transition(name) ​

原始碼 · 傳回一個新的轉場，使用指定的 name 在給定的 selection 上。如果未指定 name，則使用 null。新的轉場只會與同名的其他轉場互斥。

如果 name 是 transition 實例，則傳回的轉場會具有與指定的轉場相同的 id 和 name。如果在選取的元素上已經存在具有相同 id 的轉場，則會傳回該元素的現有轉場。否則，傳回的轉場的計時會繼承自每個選取元素最近祖先上具有相同 id 的現有轉場。因此，這個方法可以用來在多個選取上同步轉場，或重新選取特定元素的轉場並修改其組態。例如

js
const t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");

如果指定的 transition 在選取的節點或其祖先上找不到（例如轉場 已經結束），則會使用預設的計時參數；不過，在未來的版本中，這可能會改為擲回錯誤。請參閱 #59。

transition(name) ​

原始碼 · 傳回根元素 document.documentElement 上的新轉場，並帶有指定的 名稱。如果未指定 名稱，則使用 null。新轉場只會與同名的其他轉場互斥。名稱也可以是 轉場 實例；請參閱 selection.transition。此方法等同於

js
d3.selection()
  .transition(name)

此函式也可以用於測試轉場 (instanceof d3.transition) 或延伸轉場原型。

transition.select(selector) ​

原始碼 · 針對每個選取的元素，選取與指定的 selector 字串相符的第一個後代元素（如果有的話），並傳回對結果選取的轉場。selector 可以指定為選取器字串或函式。如果是函式，則會依序針對每個選取的元素評估，並傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中 this 為目前的 DOM 元素。新轉場具有與此轉場相同的 id、名稱和時機；但是，如果在選取的元素上已存在具有相同 id 的轉場，則會為該元素傳回現有的轉場。

此方法等同於透過 transition.selection 衍生此轉場的選取，透過 selection.select 建立子選取，然後透過 selection.transition 建立新轉場

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

transition.selectAll(selector) ​

原始碼 · 針對每個選取的元素，選取與指定的 selector 字串相符的所有後代元素（如果有的話），並傳回對結果選取的轉場。selector 可以指定為選取器字串或函式。如果是函式，則會依序針對每個選取的元素評估，並傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中 this 為目前的 DOM 元素。新轉場具有與此轉場相同的 id、名稱和時機；但是，如果在選取的元素上已存在具有相同 id 的轉場，則會為該元素傳回現有的轉場。

此方法等同於透過 transition.selection 衍生此轉場的選取，透過 selection.selectAll 建立子選取，然後透過 selection.transition 建立新轉場

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

transition.selectChild(selector) ​

原始碼 · 對於每個選取的元素，選取符合指定的 selector 字串（如果有的話）的第一個子元素，並傳回對結果選取的轉場。selector 可以指定為選擇器字串或函式。如果是函式，則會依序針對每個選取的元素評估，傳遞目前的資料（d）、目前的索引（i）和目前的群組（nodes），其中 this 為目前的 DOM 元素。新的轉場具有與此轉場相同的 id、名稱和時序；但是，如果選取的元素上已存在具有相同 id 的轉場，則會為該元素傳回現有的轉場。

此方法等於透過 transition.selection 衍生此轉場的選取，透過 selection.selectChild 建立子選取，然後透過 selection.transition 建立新的轉場。

js
transition
  .selection()
  .selectChild(selector)
  .transition(transition)

transition.selectChildren(selector) ​

原始碼 · 對於每個選取的元素，選取符合指定的 selector 字串（如果有的話）的所有子元素，並傳回對結果選取的轉場。selector 可以指定為選擇器字串或函式。如果是函式，則會依序針對每個選取的元素評估，傳遞目前的資料（d）、目前的索引（i）和目前的群組（nodes），其中 this 為目前的 DOM 元素。新的轉場具有與此轉場相同的 id、名稱和時序；但是，如果選取的元素上已存在具有相同 id 的轉場，則會為該元素傳回現有的轉場。

此方法等於透過 transition.selection 衍生此轉場的選取，透過 selection.selectChildren 建立子選取，然後透過 selection.transition 建立新的轉場。

js
transition
  .selection()
  .selectChildren(selector)
  .transition(transition)

transition.filter(filter) ​

原始碼 · 對於每個選取的元素，只選取符合指定的 filter 的元素，並傳回對結果選取的轉場。filter 可以指定為選擇器字串或函式。如果是函式，則會依序針對每個選取的元素評估，傳遞目前的資料（d）、目前的索引（i）和目前的群組（nodes），其中 this 為目前的 DOM 元素。新的轉場具有與此轉場相同的 id、名稱和時序；但是，如果選取的元素上已存在具有相同 id 的轉場，則會為該元素傳回現有的轉場。

此方法等於透過 transition.selection 衍生此轉換的選取，透過 selection.filter 建立子選取，然後透過 selection.transition 建立新的轉換

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

transition.merge(other) ​

原始碼 · 傳回新的轉換，將此轉換與指定的 other 轉換合併，其 id 必須與此轉換相同。傳回的轉換具有與此轉換相同的群組數、父項、名稱和 id。此轉換中任何遺失 (null) 的元素都會填入對應的元素，如果存在 (非 null) 的話，則來自 other 轉換。

此方法等於透過 transition.selection 衍生此轉換的選取，與透過 selection.merge 從 other 轉換衍生的選取合併，然後透過 selection.transition 建立新的轉換

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

transition.transition() ​

原始碼 · 傳回新的轉換，選取的元素與此轉換相同，排程在這個轉換結束時開始。新的轉換繼承參考時間，等於此轉換的時間加上其 延遲 和 持續時間。新的轉換也繼承此轉換的名稱、持續時間和 緩和。此方法可用於排程一系列的串連轉換。例如

js
d3.selectAll(".apple")
  .transition() // First fade to green.
    .style("fill", "green")
  .transition() // Then red.
    .style("fill", "red")
  .transition() // Wait one second. Then brown, and remove.
    .delay(1000)
    .style("fill", "brown")
    .remove();

每個轉換的延遲相對於其前一個轉換。因此，在上述範例中，蘋果會在最後一個轉換為棕色的轉換開始前保持紅色一秒鐘。

transition.selection() ​

原始碼 · 傳回對應於此轉換的 選取。

active(node, name) ​

範例 · 原始碼 · 傳回指定 node 上具有指定 name (名稱) 的 active 轉換，如果有的話。如果未指定 name，則使用 null。如果指定 node 上沒有這樣的 active 轉換，則傳回 null。此方法對於建立串連轉換很有用。例如，要啟動 disco 模式

js
d3.selectAll("circle").transition()
    .delay((d, i) => i * 50)
    .on("start", function repeat() {
        d3.active(this)
            .style("fill", "red")
          .transition()
            .style("fill", "green")
          .transition()
            .style("fill", "blue")
          .transition()
            .on("start", repeat);
      });