by Observable

外觀

修改元素 ​

選取元素並使用 selection.transition 建立轉場後，使用轉場的轉換方法來影響文件內容。

transition.attr(name, value) ​

原始碼 · 對於每個選取的元素，將指定 name 屬性的 屬性補間 指定為目標 value。補間的起始值是轉場開始時屬性的值。目標 value 可以指定為常數或函式。如果是函式，則會依序立即針對每個選取的元素評估，傳入目前資料 (d)、目前索引 (i) 和目前群組 (nodes)，其中 this 為目前的 DOM 元素。

如果目標值為 null，則會在轉場開始時移除屬性。否則，會根據目標值的類型選擇內插器，使用以下演算法

  1. 如果 value 是數字，則使用 interpolateNumber。
  2. 如果 value 是 color 或可強制轉換為顏色的字串，則使用 interpolateRgb。
  3. 使用 interpolateString。

若要套用不同的內插器，請使用 transition.attrTween。

transition.attrTween(name, factory) ​

來源 · 如果指定了 factory 且不為 null，則將具有指定 name 的屬性的屬性 tween 指定給指定的插補器 factory。插補器工廠是一個傳回 插補器 的函數；當轉換開始時，會依序為每個選取的元素評估 factory，傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中 this 為目前的 DOM 元素。然後會依序為轉換的每個影格呼叫傳回的插補器，傳遞 緩和 時間 t，通常在範圍 [0, 1] 內。最後，插補器的傳回值將用於設定屬性值。插補器必須傳回字串。（要在轉換開始時移除屬性，請使用 transition.attr；要在轉換結束時移除屬性，請使用 transition.on 來聆聽 end 事件。）

如果指定的 factory 為 null，則移除先前指定的 name 屬性 tween（如果有）。如果未指定 factory，則傳回具有指定 name 屬性的目前的插補器工廠，或如果沒有此類 tween，則傳回未定義。

例如，要將 fill 屬性從紅色插補到藍色

js
transition.attrTween("fill", () => d3.interpolateRgb("red", "blue"));

或從目前的 fill 插補到藍色，例如 transition.attr

js
transition.attrTween("fill", function() {
  return d3.interpolateRgb(this.getAttribute("fill"), "blue");
});

或套用自訂彩虹插補器

js
transition.attrTween("fill", () => (t) => `hsl(${t * 360},100%,50%)`);

此方法可用於指定自訂插補器，例如了解 SVG 路徑 的插補器。一個有用的技巧是資料插補，其中 interpolateObject 用於插補兩個資料值，然後使用結果值（例如，使用 形狀）來計算新的屬性值。

transition.style(name, value, priority) ​

原始碼 · 對於每個選取的元素，指定具有指定名稱的樣式的 樣式補間 到指定目標值，並具有指定的優先順序。補間的起始值是樣式的內聯值（如果存在），否則在過渡開始時是其計算值。目標值可以指定為常數或函式。如果是函式，則會按順序為每個選取的元素立即評估，傳遞目前的資料（d）、目前的索引（i）和目前的群組（nodes），其中this為目前的 DOM 元素。

如果目標值為 null，則在過渡開始時會移除樣式。否則，會根據目標值的類型使用下列演算法選擇插補器

  1. 如果 value 是數字，則使用 interpolateNumber。
  2. 如果 value 是 color 或可強制轉換為顏色的字串，則使用 interpolateRgb。
  3. 使用 interpolateString。

若要套用不同的插補器，請使用 transition.styleTween。

transition.styleTween(name, factory, priority) ​

原始碼 · 如果指定了 factory 且不為 null，則將具有指定 name 的樣式的 tween 指定給指定的內插器 factory。內插器工廠是一個傳回 內插器 的函數；當轉場開始時，會依序對每個選取的元素評估 factory，傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中 this 為目前的 DOM 元素。然後，會依序對轉場的每個影格呼叫傳回的內插器，傳遞 緩和 時間 t，通常在 [0, 1] 範圍內。最後，會使用內插器的傳回值設定具有指定 priority 的樣式值。內插器必須傳回字串。（若要在轉場開始時移除樣式，請使用 transition.style；若要在轉場結束時移除樣式，請使用 transition.on 來聆聽 end 事件。）

如果指定的 factory 為 null，則移除先前指定的具有指定 name 的樣式 tween（如果有的話）。如果未指定 factory，則傳回具有指定 name 的樣式的目前內插器工廠，如果沒有此類 tween，則傳回未定義。

例如，若要將填滿樣式從紅色內插到藍色

js
transition.styleTween("fill", () => d3.interpolateRgb("red", "blue"));

或者從目前的填滿內插到藍色，例如 transition.style

js
transition.styleTween("fill", function() {
  return d3.interpolateRgb(this.style.fill, "blue");
});

或套用自訂彩虹插補器

js
transition.styleTween("fill", () => (t) => `hsl(${t * 360},100%,50%)`);

這個方法對於指定自訂內插器很有用，例如在 interpolateObject 用於內插兩個資料值，然後使用結果值計算新的樣式值的 資料內插 中。

transition.text(value) ​

原始碼 · 對於每個選取的元素，當轉場開始時，將 文字內容 設定為指定的目標 value。value 可以指定為常數或函數。如果為函數，則會依序對每個選取的元素立即評估，傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中 this 為目前的 DOM 元素。然後，會使用函數的傳回值設定每個元素的文字內容。null 值會清除內容。

若要內插文字，而不是在開始時設定文字，請使用 transition.textTween 或附加替換元素並交叉淡化不透明度。文字預設不會內插，因為通常不希望這樣做。

transition.textTween(factory) ​

原始碼, 範例

如果指定了 factory 且不為 null，則將文字 tween 指定給指定的內插器 factory。內插器工廠是一個傳回 內插器 的函數；當轉場開始時，會依序對每個選取的元素評估 factory，傳遞目前的資料 d 和索引 i，其中 this 的內容為目前的 DOM 元素。然後，會依序對轉場的每個影格呼叫傳回的內插器，傳遞 緩和 時間 t，通常在 [0, 1] 範圍內。最後，會使用內插器的傳回值設定文字。內插器必須傳回字串。

例如，要內插數字 0 到 100 的文字

js
transition.textTween(() => d3.interpolateRound(0, 100));

如果指定的 factory 為 null，則移除先前指定的文字補間，如果有。如果未指定 factory，則傳回文字的目前內插器 factory，或者如果沒有此類補間，則傳回未定義。

transition.remove() ​

來源 · 對於每個選取的元素，移除元素，只要元素沒有其他作用中或待處理的補間，就會在補間結束時移除元素。如果元素有其他作用中或待處理的補間，則不執行任何動作。

transition.tween(name, value) ​

來源 · 對於每個選取的元素，指定具有指定 name 的補間，其 value 函數為指定函數。value 必須指定為傳回函數的函數。當補間開始時，將依序對每個選取的元素評估 value 函數，傳遞目前的資料 (d)、目前的索引 (i) 和目前的群組 (nodes)，其中 this 為目前的 DOM 元素。然後，依序對補間的每個畫面呼叫傳回的函數，傳遞緩和時間 t，通常在 [0, 1] 範圍內。如果指定的 value 為 null，則移除先前指定的 name 的補間，如果有。

例如，要內插填滿屬性為藍色，就像 transition.attr

js
transition.tween("attr.fill", function() {
  const i = d3.interpolateRgb(this.getAttribute("fill"), "blue");
  return function(t) {
    this.setAttribute("fill", i(t));
  };
});