> [Wiki](Home) ? [[API--中文手冊]] ? [[核心函數]] ? **過渡**
* 本文檔是D3官方文檔中文翻譯，并保持與[最新版](https://github.com/mbostock/d3/wiki/API-Reference)同步。
* 如發現翻譯不當或有其他問題可以通過以下方式聯系譯者:
* 郵箱：zhang_tianxu@sina.com
* QQ群：[D3數據可視化](http://jq.qq.com/?_wv=1027&k=ZGcqYF)205076374，[大數據可視化](http://jq.qq.com/?_wv=1027&k=S8wGMe)436442115
過渡是一種特殊類型的選擇器([[selection|選擇器]])，這種操作符的應用隨時間平滑而不是瞬間變換。你可以使用過渡[[transition()|選擇器#transition]] 操作符從選擇得到一個過渡。但是，過渡通常支持和選擇器（例如[attr](過渡#attr)和[style](過渡#style)）一樣的操作符，不是所有的操作符都支持。例如，你必須在過渡開始前添加元素。移除[remove](過渡#remove)操作符用來在過渡結束后方便地移除元素。
過渡可能有每個元素的延遲和持續時間，使用類似于其他操作符的數據計算功能。這可以很容易地給不同元素切換過渡，不論基于數據還是索引。例如，你可以給元素排序然后在變換中交錯過渡得到更好的元素重排序效果。想了解更多關于此技術的內容請參考Heer和Robertson的[Animated Transitions in Statistical Data Graphics](http://vis.berkeley.edu/papers/animated_transitions/ "http://vis.berkeley.edu/papers/animated_transitions/")。
D3有許多內置插值來簡化任意值的過渡。例如，你可以從字體字符串“500 12px sans-serif”到“300 42px sans-serif”過渡，D3將發現嵌入在字符串內的數字自動地插入字體尺寸（size）和重量（weight）。您甚至可以插入任意的嵌套對象和數組或SVG路徑數據。如果你找到內置插值的不足，D3允許使用[attrTween](過渡#attrTween)和[styleTween](過渡#styleTween)操作符自定義的內插器。D3的插值器提供[[比例尺|比例尺]]的基礎并且可以用在過渡的外部。內插器是一個函數將定義域[0,1]中的而一個值t映射為一個顏色（color），數字或者任意的值。
更多關于過渡的內容可以參考[Working with Transitions](http://bost.ocks.org/mike/transition/ "http://bost.ocks.org/mike/transition/") 教程。
對給定的元素在給定的時間只有一個過渡被激活。然而，在相同的元素可能安排多個過渡；只要是錯開的時間，每一個過渡將按順序運行。如果有新轉變給定元素上運行，它隱含取消所有舊的轉變，包括任何被安排但尚未運行。這允許一個新的過渡，例如那些將對一個新的用戶事件響應的過渡，將會取代老的過渡，即使那些舊的過渡已經上演過了或者延遲上演了。多級過渡（過渡是在較早一個過渡的end事件中創建的過渡）被認為是和原始的過渡相同的“年齡”的；這是內部通過在單調增加的唯一ID跟蹤的，其中ID是創建多級過渡時繼承的。
## 開始過渡
<a name="d3_transition" href="#d3_transition">#</a> d3.**transition**([*selection*], [*name*])
創建動畫過渡。這等價于`d3.select(document).transition()`。這個方法很少使用，因為它通常更容易從現有選擇導出的轉變，而不是從現有的過渡導出的選擇。當使用可選的選擇調用，這個方法通常返回指定選擇；例如它是一個空操作。然而，transition.each的上下文中，這個方法將為指定的選擇（繼承了延遲，持續和其他父過渡中的屬性）創建一個新的過渡。這用來實現可以不論在選擇器或者在過渡中都能被調用的可重用組件是非常有用的。在后者的情況下支持導出并行過渡。相關的一個實例可以參考D3的[axis component](https://github.com/mbostock/d3/wiki/SVG-Axes "https://github.com/mbostock/d3/wiki/SVG-Axes")。
<a name="delay" href="#delay">#</a> transition.**delay**([*delay*])
指定過渡*延遲（delay ）*以毫秒為單位。如果*延遲*是一個常量，則所有的元素將被賦予相同的延遲；如果*延遲*是一個函數，則這個函數將被每個選中的元素（按順序）計算，將被傳遞當前的數據d和當前的索引i作為函數的變量，使用this上下文作為當前DOM元素。這個函數的返回值將被用來為每個元素的延遲設置值。默認的延遲是0。如果*[[延遲(duration)|過渡#duration]]*沒有被指定，就返回過渡中第一個非空元素綁定的delay值。
設定延遲為索引i的倍數是一種方便方式錯開元素過渡。例如，如果你使用duration 中固定的持續，并且當前選擇有n個元素，你可以通過2 \* *duration* 錯開過渡：
```javascript
.delay(function(d, i) { return i / n * duration; })
```
你也可以計算出延遲作為數據的一個功能，從而產生一個數據驅動的動畫。
注意: 延遲總是相對一系列過渡中的*第一個*而言.
<a name="duration" href="#duration">#</a> transition.**duration**([*duration*])
指定每個元素的持續時間（duration ），單位為毫秒。如果持續時間是常量的，那么所有的元素被給予相同的持續時間；否則，如果持續時間是函數，則該函數為每個選定的元件（按順序）計算持續時間，被傳遞的當前數據d與當前索引i，并用this表示當前的DOM元素。該函數的返回值被用于設置每個元素的持續時間。默認持續時間為250毫秒。如果沒有指定時間，則返回綁定過渡（transition）中的第一個非空元素的持續時間。
<a name="ease" href="#ease">#</a> transition.**ease**([*value*[, *arguments*]])
指定過渡的緩動函數([easing function](http://www.robertpenner.com/easing/ "http://www.robertpenner.com/easing/")。如果*value*參數是一個函數，它被用于緩解當前參數定時值*t*，*t*通常在范圍[0,1]內。 （在過渡結束時，*t*可以是稍大于1）否則，*value*參數被假定為一個字符串，這個參數被傳遞給[[d3.ease|Transitions#d3_ease]]方法來產生一個緩動函數。默認緩動函數是“cubic-in-out”。需要注意的是它不能用來定制每個元件或每個屬性的緩動函數；但是，如果你使用的“線性（linear）”緩和函數，可以通過使用attrTween或styleTween插值器中內置的定制緩動功能。如果未指定緩動，則返回綁定到此過渡（transition）中的第一個非空元素的緩動函數。
##Operating on Transitions
###Content
<a name="attr" href="#attr">#</a> transition.**attr**(*name*, *value*)
通過指定的*name*和*value*過渡屬性的值。過渡的初始值是當前屬性值（一定要事先設定一個初始值，如果你不想壞的意外），結束值是指定的值。如果value 是常量的，那么所有的元素被給予相同的屬性值 ；否則，如果value 是函數，則該函數為每個選定的元件（按順序）計算屬性值，被傳遞的參數是當前數據d與當前索引i，用this表示當前的DOM元素。該函數的返回值被用于設置每個元素的屬性。不支持null值因為插值器將變成未定義的（undefined）；如果你想在過渡結束后移除屬性值可以使用remove函數。
內插器基于終值自動選擇。如果終值是一個數字，開始值被強制轉換為一個數字，并使用interpolateNumber內插器。如果結束值是一個字符串，執行一個檢查，以查看該字符串是否代表一個顏色形如/^(#|rgb\(|hsl\()/或CSS命名顏色中的一個；如果是，則初始值被強制為RGB顏色，使用interpolateRgb內插器。否則，interpolateString內插器被使用，在字符串中插入數字。
<a name="attrTween" href="#attrTween">#</a> transition.**attrTween**(*name*, *tween*)
根據指定的補間（tween）函數，通過指定的名稱（name）過渡屬性值。過渡的開始和結束值由補間函數決定。補間函數在每個元素的過渡開始的時候被調用，傳入參數有當前數據d，當前索引i，this上下文表示當前DOM元素。補間函數的返回值必須是一個插值器：函數將定義域[0,1]映射為顏色、數字或者屬性值。例如，attr操作符是建立在attrTween操作符之上的。補間函數被attr操作符使用取決于終值是一個函數還是常量。如果終值是一個函數則：
```javascript
function tween(d, i, a) {
return d3.interpolate(a, String(value.call(this, d, i)));
}
```
Otherwise, if the end value is a constant:
如果終值是一個常量則：
```javascript
function tween(d, i, a) {
return d3.interpolate(a, String(value));
}
```
這個attrTween操作符在你需要一個自定義的內插器的時候用到，例如：理解SVG路徑數據語義。一種常見的技術是數據空間插值：其中interpolateObject用來插入兩個數據值，這個插值的結果（也就是用一個shap）用來計算新屬性值。使用attr操作符處理簡單常見的情況，即內插器可以自動地從當前屬性值轉到期望的終值。
<a name="style" href="#style">#</a> transition.**style**(*name*, *value*[, *priority*])
通過指定的名稱（name）和值（value）過渡CSS樣式屬性值。可選參數優先級（priority）也可以指定為null或者字符串"important"（不帶感嘆號）。過渡的起始值是當前計算的樣式屬性值，終值是指定的value。如果value是一個常量那么所有的元素都被指定為相同的樣式屬性值；否則，如果value是一個函數那么函數將為每個選定的元素（按順序）計算值，被傳遞的參數有當前數據d，當前索引i，this上下文代表當前DOM元素。函數的返回值之后被用來轉換每個元素的樣式屬性值。null是不支持的，因為插值器需要是undefined；如果你想在轉換之后移除樣式屬性，參考end事件。
內插器基于終值自動選擇。如果終值是一個數字，開始值被強制轉換為一個數字，并使用interpolateNumber內插器。如果結束值是一個字符串，執行一個檢查，以查看該字符串是否代表一個顏色形如/^(#|rgb\(|hsl\()/或CSS命名顏色中的一個；如果是，則初始值被強制為RGB顏色，使用interpolateRgb內插器。否則，interpolateString內插器被使用，在字符串中插入數字。
需要注意的是所計算的初始值也可以和以前設定的值不同，尤其是當樣式屬性使用的縮寫屬性（如“font”樣式，簡寫為“font-size”，“font-face”，等等）。此外，計算尺寸，如“font-size”和“line-height”是以像素為單位，所以你也應該適當地指定以像素為單位的終值。
<a name="styleTween" href="#styleTween">#</a> transition.**styleTween**(*name*, *tween*[, *priority*])
根據指定的補間函數指定的名稱過渡CSS樣式屬性的值。可選參數priority 可以被指定為null或者字符串“important”（沒有感嘆號）。過渡的起始和結束值由補間函數決定；補間函數在沒給元素過渡開始的時候調用，被傳遞的參數是當前數據d，當前索引I，當前屬性值a，this上下文代表當前DOM元素。補間函數的返回值必須是一個插值器：一個函數映射定義域[0,1]中的值t為一個顏色、數字或者屬性值。
例如，style操作符是建立在styleTween操作符之上的。補間函數被style操作符使用取決于終值是一個函數還是常量。終值是函數時：
```javascript
function tween(d, i, a) {
return d3.interpolate(a, String(value.call(this, d, i)));
}
```
終值是常量時：
```javascript
function tween(d, i, a) {
return d3.interpolate(a, String(value));
}
```
styleTween操作符在需要定制插值器的使用使用到，例如：理解CSS3轉換的語義。對簡單常用的情況使用style操作符，即插值器可以從當前計算的樣式屬性自動驅動到期望的終值。
<a name="text" href="#text">#</a> transition.**text**(*value*)
文本（text）操作符是基于textContent 屬性：設置文本內容將取代任何現有的子元素。在轉換開始時設置所有選定元素的文本內容為指定值。如果值是一個常數，那么所有的元素被給予相同的文本內容；否則，如果值是一個函數，則該函數被每個選定的元件（按順序）計算，被傳遞當前數據d與當前索引i，this上下文作為當前的DOM元素。該函數的返回值被用于設置每個元素的文本內容。null值會清除內容。
<a name="tween" href="#tween">#</a> transition.**tween**(*name*, *factory*)
注冊一個自定義補間指定的名稱（name）。當在過渡開始時，指定的工廠函數將被過渡中每個選定的元素調用，傳遞該元素的數據（d）和索引（ⅰ）作為參數，元素作為上下文（this）。工廠應反回補間函數，在整個過渡過程中被調用。補間函數之后被反復調用，傳遞當前的歸一化時間t在[0，1]范圍內。如果工廠返回null，則補間不會在選定元素上運行。
補間函數是用來內部實現attr和style補間，并可以用來對其它文檔內容進行內插。例如，內插從0到100的文本內容：
```javascript
selection.transition().tween("text", function() {
var i = d3.interpolateRound(0, 100);
return function(t) {
this.textContent = i(t);
};
});
```
補間常使用閉包捕捉過渡開始時創建的狀態。上例中，i在過渡開始的時候初始化，隨后用在過渡過程中（雖然注意到，在上面的例子中，轉變的開始值是硬編碼為0，而過渡更常用的初始值是基于DOM中的當前狀態）。
<a name="remove" href="#remove">#</a> transition.**remove**()
在過渡結束時刪除選定的元素。如果在任何選定的元素有新的過渡計劃，這些元素不會被刪除；然而，“end”事件仍會被調度。
Subtransitions
過渡可以從現有的過渡派生，類似subselections的方式。 Subtransitions繼承緩動，持續和延遲父過渡。
<a name="select" href="#select">#</a> transition.**select**(*selector*)
當前過渡的每個元素中，選擇指定的選擇字符串匹配的第一個后代元素。如果當前元素沒有元素匹配指定的選擇器字符串，那么返回的選擇中當前索引的元素將是null。操作符（除數據）自動的跳過空值，從而保持現有選擇的索引。如果當前元素具有相關聯的數據，該數據是由返回的部分選定繼承，并自動綁定到新選定的元素。如果多個元素匹配選擇器，只在文件遍歷順序的第一個匹配的元素將被選中。
This method is approximately equivalent to:
這個方法大約相當于：
其中，selection 是當前過渡的隱含選擇器。另外，返回的新過渡從當前的過渡繼承緩動，持續和延遲。
<a name="selectAll" href="#selectAll">#</a> transition.**selectAll**(*selector*)
對當前過渡的每個元素，選擇匹配指定選擇字符串后代元素。返回的選擇按當前選擇的祖先節點進行分組。如果當前元素沒有元素匹配指定選擇器，返回的選擇中當前索引的組將是空的。部分選取不從當前選擇繼承數據。然而，如果數據之前綁定到選定的元素上，那個數據可用于操作符。
This method is approximately equivalent to:
這個方法大約相當于：
```javascript
selection.selectAll(selector).transition()
```
其中，selection 是當前過渡的隱含選擇器。另外，返回的新過渡從當前的過渡繼承緩動，持續和延遲。當前過渡中每個子元素的持續和延遲都是繼承自父元素。
<a name="filter" href="#filter">#</a> transition.**filter**(*selector*)
過濾過渡，返回一個新的過渡只包含其指定的選擇是正確的元素。選擇器可以被指定為一個函數或選擇字符串，如“foo”。和其他操作符一樣，該函數被傳遞當前數據d和當前索引i，this上下文作為當前的DOM元素。類似內置的數組過濾函數，返回選擇不保留原選擇的索引；返回移除元素的副本。如果您想保留索引，使用select代替。例如，選擇所有其他元素：
```javascript
var odds = transition.select(function(d, i) { return i & 1 ? this : null; });
```
Equivalently, using a filter function:
等價于使用過濾函數：
```javascript
var odds = transition.filter(function(d, i) { return i & 1; });
```
Or a filter selector:
或者一個過濾選擇器：
```javascript
var odds = transition.filter(":nth-child(odd)");
```
Thus, you can use either select or filter to apply tweens to a subset of elements.
這樣你就可以使用select和過濾器在元素子集上應用補間了。
<a name="transition" href="#transition">#</a> transition.**transition**()
在同樣的選中元素上創建一個新的選擇，在這個過渡結束后啟動。新的過渡繼承當前過渡的持續和緩動。這可以用來定義鏈式過渡，而無需監聽“end”事件。
// **revision needed 需要重新翻譯**
```
Creates a new transition on the same selected elements that starts when this transition ends. The new transition inherits a delay equal to this transition's delay + duration to control this timing. The new transition also inherits this transition’s name, duration, and easing. This can be used to define [chained transitions](http://bl.ocks.org/mbostock/4341417) without needing to listen for "end" events.
As described above, the delay state of chained transitions is used as a scaffold for the chain. This means that the delay method will have unexpected behaviour in this context, however, if you want to add a delay between chained transitions, an easy way to do this is to have a no-op transition in between:
selection.transition() // this transition runs from t=1s to t=3s
.delay(1000)
.duration(2000)
.transition() // then a delay from t=3s to t=4s
.duration(1000)
.transition() // then lastly another transition from t=4s to t=5s
Though, note that the last transition in this chain inherits the 1s duration from the interstitial pause, and not the 2s duration from the first transition.
```
### Control
<a name="each" href="#each">#</a> transition.**each**([*type*, ]*listener*)
如果指定了*類型（type）*，就為過渡事件增加一個偵聽器(listener)，同時支持“start”, “end”和"interrupt"件。偵聽器會被過渡中每個單獨的元素調用。
*start*事件在過渡的第一個異步回調（tick）中被調用，于任何補間(tween)被調用之前。對于0延遲過渡，通常在過渡之后的17ms被調用。狀態函數對觸發每個元素的瞬間變化是很有用的，例如改變不能被打斷的屬性。
*end*事件在過渡的持續和延遲結束之后最后一個異步回調（tick）中被調用，在所有的補間都使用t=1調用之后。注意，如果對于一個給定的元素過渡被之后調度的過渡取代了， end事件就不會分配到這個元素上；中斷過渡不會觸發結束事件。例如，[[transition.remove|#remove]]調度的每個元素在過渡結束時被除去，但如果過渡被中斷了，元素將不被刪除。end事件可以被用作替代[[transition.transition|#transition]],通過選擇當前元素this，并導出新過渡來創建過渡鏈([chained transitions](http://bl.ocks.org/mbostock/1125997 "http://bl.ocks.org/mbostock/1125997"))。
**translation needed: 需要翻譯:**
```
The *interrupt* event is invoked if an active transition is interrupted by another transition of the same name on the same element. The interrupt event is dispatched on the interrupted transition immediately prior to the start event on the interrupting transition. Note that if a transition is cancelled before it starts (such as when a later-scheduled transition starts before a delayed transition), no interrupt event is dispatched.
```
如果沒有指定type ，行為類似于[[selection.each|Selections#each]]：直接為當前過渡的每個元素調用指定的函數，通過在當前的數據d和索引i，與當前的DOM元素的this上下文。 transition.each將從父過渡繼承過渡參數，包括id，延遲和緩動。因此，transition.each內創建過渡不會打斷父過渡，類似subtransitions。
transition.each方法可用于鏈接過渡并在一組過渡上分享定時（timing）。例如：
```javascript
d3.transition()
.duration(750)
.ease("linear")
.each(function() {
d3.selectAll(".foo").transition()
.style("opacity", 0)
.remove();
})
.transition()
.each(function() {
d3.selectAll(".bar").transition()
.style("opacity", 0)
.remove();
});
```
通過使用transition.each中的`d3.select(this)` ，你甚至可以繼承一組選定元素的交錯延遲。這個技術在數軸組件中用來支持自動過渡。此方法被用于[[SVG 軸|SVG-軸]]來支持自動過渡([automatic transitions](http://bl.ocks.org/mbostock/1166403 "http://bl.ocks.org/mbostock/1166403")).
<a name="call" href="#call">#</a> transition.**call**(*function*[, *arguments…*])
調用指定的*函數（function）*一次，通過一些可選的*參數（arguments）*傳遞當前的過渡。call操作符總是返回當前的過渡，與指定函數的返回值無關。call操作符和手動執行一個函數是一樣的。但是，它更容易使用方法鏈。例如，假設我們要在許多不同的地方以同樣的方式設置一些屬性。我們編寫代碼，把它封裝為一個可重復使用的函數：
```javascript
function foo(transition) {
transition
.attr("name1", "value1")
.attr("name2", "value2");
}
```
現在我們可以這樣使用`foo()`:
```javascript
foo(d3.selectAll("div").transition());
```
或者, 等價地：
```javascript
d3.selectAll("div").transition().call(foo);
```
在很多情況下，是可以在過渡和選擇上調用同一個函數foo的，因為在過渡和選擇上是一樣的方法。被調函數的`this`就是當前過渡。第一個用法略顯多余，這我們可能在未來解決。
<a name="empty" href="#empty">#</a> transition.**empty**()
返回true如果當前過渡是空的；過渡是空的，是指它不包含任何非null元素。
<a name="node" href="#node">#</a> transition.**node**()
返回在當前過渡的第一個非空元素。如果轉換為空，則返回null。
<a name="size" href="#size">#</a> transition.**size**()
返回在當前的過渡元素的總數。
## Easing
<a name="d3_ease" href="#d3_ease">#</a> d3.**ease**(*type*[, *arguments…*])
返回一個指定類型（type），帶有任何可選參數（arguments）的內置緩動函數。一個緩動函數將當前參數化的時間值t從定義域[0,1]映射到一個相似返回的其他值；這通常用來設置過渡的緩動。D3支持以下的緩動類型：
? linear -標識函數, t.
? poly(k) – t 的 k次方 (例如3).
? quad – 等價于poly(2).
? cubic - 等價于poly(3).
? sin – 使用三角函數 sin.
? exp – 2的t次方
? circle - 四分之一圈
? elastic(a, p) - 模擬一個橡皮筋；略有延長可能會超出0,1。
? back(s) - 模擬備份到一個停車位。
? bounce - 模擬一個有彈性碰撞。
這些內置的類型可以采用各種方式進行擴展：
? in - 標識的功能。
? out -逆轉緩動的方向為[1,0]。
? in-out -從[0,.5]和[.5,1]復制和鏡像緩動函數。
? out-in -從[1,.5]和[.5,0]復制和鏡像緩動函數。
默認的緩動函數是“cubic-in-out” 它提供了適合慢入慢出動畫。
<a name="_ease" href="#_ease">#</a> **ease**(*t*)
給定的參數時間t，通常在范圍[0,1]內，返回的緩動的時間。返回的值通常是在范圍[0,1]為好，但對于某些緩動的函數也可以超出這個范圍，比如“彈性（elastic）”就可稍微延伸。
## Timers
D3在內部維護一個高效的定時器隊列，使成千上萬的定時器可以用最小的開銷并發地處理；此外，該定時器隊列保證動畫的一致的定時時同時或分階段轉換被調度。如果您的瀏覽器支持它，定時器隊列將使用requestAnimationFrame流體高效的動畫。定時器隊列也是聰明的使用setTimeout的時候有一個調度事件之前，出現長時間的延遲。
<a name="d3_timer" href="#d3_timer">#</a> d3.**timer**(*function*[, *delay*[, *time*]])
啟動一個自定義動畫計時器，重復地調用指定的函數（function ），直到它返回true。計時器啟動后沒有辦法把它取消，所以一定要確保完成時，你的計時器函數返回true！
當給定函數將在一段延遲之后被調用時，一個以毫秒為單位的可選數字delay可能被指定。延時是相對于指定時間從UNIX紀元以毫秒為單位;如果沒有指定時間，則默認為Date.now。
您可以使用延遲（delay ）和時間（time ）以指定function應該開始被調用的相對和絕對時刻。例如，一個日歷通知可能被編碼為：
d3.timer(notify, -4 * 1000 * 60 * 60, +new Date(2012, 09, 29)); // four hours before midnight October 29 (months are zero-based)
<a name="d3_timer_flush" href="#d3_timer_flush">#</a> d3.timer.**flush**()
立即執行（調用一次）任何活動的計時器。通常，在瞬時延遲（<10毫秒）之后執行零延遲過渡。如果瀏覽器兩次呈現頁面，這可能會導致一個簡短的閃爍。一旦在第一事件循環的結束，然后再次緊接在第一定時器的回調。通過在第一事件循環結束時刷新定時器隊列，可以立即執行任何零延遲過渡，避免了閃爍。
## Interpolation
D3有很多內置interpolators來簡化任意值的過渡；插值器是一個函數，用來將值域[0,1]中參數值t映射為一種顏色，數字或任意值。
<a name="d3_interpolate" href="#d3_interpolate">#</a> d3.**interpolate**(*a*, *b*)
返回一個介于a和b之間的默認插值器。插值器的類型是基于后面一個值b的類型,使用以下算法:
1.如果b是顏色（color）類型，則返回interpolateRgb插值器。
2.如果b是字符串（string）類型，則返回interpolateString插值器。
3.如果b是數組（array）類型，則返回interpolateArray插值器。
4.如果b是對象（object）類型，且不能強制轉換為數字類型, 則返回interpolateObject插值器。
5.否則，返回interpolateNumber插值器。
基于選定的插值器,a將被強制轉換為一個適當的對應類型。顏色檢查適用于 d3.rgb和其他顏色空間以及/^(#|rgb\(|hsl\()/形式的顏色字符串或CSS指定的顏色。
這個默認插值器的行為可以擴展至支持其他的類型。只要添加用戶自定義插值器到d3.interpolators數組中即可。
<a name="_interpolate" href="#_interpolate">#</a> **interpolate**(*t*)
對在區間[0,1]中一個給定的參數t，返回相關的插入值。插值器通常用結合比例尺一起使用，映射一個輸入域(如定量維度)到一個輸出范圍(如一系列顏色或像素位置)。
<a name="d3_interpolateNumber" href="#d3_interpolateNumber">#</a> d3.**interpolateNumber**(*a*, *b*)
返回一個a，b兩個數字之間的數字插值器。返回的插值器相當于:
```javascript
function interpolate(t) {
return a * (1 - t) + b * t;
}
```
注意:當插值器用于生成一個字符串時(例如attr)，應該避免插入0或從0返回插值器。當使用字符串轉化時，非常小的值可能轉化為科學記數法格式從而產生一個暫時無效的屬性或樣式屬性值。例如,數字0.0000001便轉換為字符串“1 e-7”。 當插入不透明度值時，這一點尤其明顯。為了避免科學記數法導致過渡的開始和結束值都是1e-6這種現象，此值是不用指數表示法轉化為字符串的最小的。
<a name="d3_interpolateRound" href="#d3_interpolateRound">#</a> d3.**interpolateRound**(*a*, *b*)
返回一個a和b兩個數字之間的數字插值器；插值器類似于interpolateNumber,除了它會將結果值四舍五入為最近的整數。
<a name="d3_interpolateString" href="#d3_interpolateString">#</a> d3.**interpolateString**(*a*, *b*)
返回一個a和b兩個字符串之間的字符串插值器。字符串插值器尋找數字嵌入在a和b里,其中每個數字的形式如下:
```
/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g
```
對于嵌入到b的每個數字,插值器將嘗試從a中找到一個相應的數字。如果找到相應的數,便通過使用interpolateNumber創建一個數字插值器。字符串b的其余部分將作為一個模板：b字符串的靜態部分對于插值器將保持值不變，插入的數字值將嵌入到模板。例如,如果a是“300 12 px sans-seri”，b是“500 36 px Comic-Sans”，兩個嵌入的數字被發現。字符串剩下的靜態部分是兩個數字之間的空間(" "),和后綴(“px Comic-Sans”)。當傳入值t =0.5時， 插值器的結果是“400 24px Comic-Sans”。
<a name="d3_interpolateRgb" href="#d3_interpolateRgb">#</a> d3.**interpolateRgb**(*a*, *b*)
返回一個a和b兩種顏色值之間的RGB顏色空間插值器。顏色a和b不需要在RGB里，但他們將通過d3.rgb轉換為RGB值。紅、綠、藍通道是線性地插入值，在某種程度上相當于interpolateRound，即小數部分的通道值是不允許返回的。插值器的返回值是一個十六進制RGB字符串。
<a name="d3_interpolateHsl" href="#d3_interpolateHsl">#</a> d3.**interpolateHsl**(*a*, *b*)
返回一個a和b兩種顏色之間的HSL顏色空間插值器。顏色之間的a和b不需要在HSL范圍中，但他們會通過d3.hsl被轉換成HSL值。色相、飽和度和明度是線性的來插入值，在某種程度上相當于interpolateNumber。(使用開始和結束色調之間的最短路徑)。插值器的返回值是一個十六進制RGB字符串。
<a name="d3_interpolateLab" href="#d3_interpolateLab">#</a> d3.**interpolateLab**(*a*, *b*)
返回一個a和b兩種顏色之間的Lab顏色空間插值器。顏色a和b將會通過d3.lab（如果需要的話）被轉換成Lab值。然后顏色通道是線性地插入值，在某種程度上相當于interpolateNumber。插入器的返回值是一個十六進制RGB字符串。
<a name="d3_interpolateHcl" href="#d3_interpolateHcl">#</a> d3.**interpolateHcl**(*a*, *b*)
返回一個a和b顏色之間的HCL顏色空間插值器。顏色a和b將會通過d3.hcl（如果需要的話）被轉換成HCL值。然后顏色通道線性地插入值，在某種程度上相當于interpolateNumber。(使用開始和結束色調之間的最短路徑)。插值器的返回值是一個十六進制RGB字符串。
<a name="d3_interpolateArray" href="#d3_interpolateArray">#</a> d3.**interpolateArray**(*a*, *b*)
返回一個在兩個數組a和b之間的數組插值器。一個擁有與b相同長度的數組模板將被創建。對于b中的每一個元素，如果在a中存在一個相應的元素，那么對于這兩個元素就會有一個通用的插值器將通過interpolate創建。如果沒有這樣的元素,那么來源于b的靜態值將在這個模板中被使用。然后，對于給定的參數t，模板的嵌入的插值器將被求值。然后返回更新后的數組模板。例如,如果a數組為[0,1]，b數組為[1,10,100] ，然后當參數t =0.5時，插值器的結果便是數組[0.5,5.5,100]。
注意:創建一個模板數組的非保護性拷貝；返回數組的修改將對內插器的隨后的評價產生不利影響。不復制是為了保證插值器的快速，因為它們是動畫內部循環的一部分。
<a name="d3_interpolateObject" href="#d3_interpolateObject">#</a> d3.**interpolateObject**(*a*, *b*)
返回一個于a和b兩個對象之間的插值器。一個擁有與b相同屬性的對象模板將被創建。對于b中的每個屬性，如果在a中存在一個對應的屬性，那么通過interpolate創建這兩個元素通用的插值器。如果沒有這樣的屬性，來源于對象b的靜態值將被使用在模板里。然后，對于給定的參數t，模板的嵌入的插值器將被進行求值。然后返回更新后的數組模板。例如，如果a對象是{ x:0,y:1 }和b對象是{ x:1,y:10 z:100 },那么當參數t =0.5時插值器的結果便是對象{ x:5,y:5.5,z:100 }。
對于數據空間差值，當插入數據值而不是屬性值時，對象插值器尤其有用。例如，您可以插入一個對象，用來描述一個餅圖里的弧，然后使用d3.svg.arc來計算這個新的SVG路徑數據。
注意:創建一個模板數組的非保護性拷貝；返回數組的修改將對內插器的隨后的評價產生不利影響。不復制是為了保證插值器的快速，因為它們是動畫內部循環的一部分。
<a name="d3_interpolateTransform" href="#d3_interpolateTransform">#</a> d3.**interpolateTransform**(*a*, *b*)
返回一個由兩個a和b表示的二維仿射變換的插值器。每個變換分解成一個標準的轉換，旋轉，x偏移和比例；然后插入這些轉換分量。這種行為是由CSS規范的：詳看matrix decomposition for animation。
<a name="d3_interpolateZoom" href="#d3_interpolateZoom">#</a> d3.**interpolateZoom**(*a*, *b*)
基于Jarke J. van Wijk and Wim A.A. Nuij共同開發的“Smooth and efficient zooming and panning”（平滑有效的縮放和移動），返回一個于兩個二維平面視圖a和b之間的平滑插值器。每個視圖的定義是由三個數字構成的數組：cx，cy和width。前兩個坐標cx，cy代表視窗的中心；最后width（寬度）代表視窗的大小。返回的插入器還有一個持續時間（duration ）屬性，此屬性推薦用以毫秒為單位的過渡時間來編碼。這個持續時間是基于x，y空間弧形軌跡路徑長度的。如果你想更慢或更快的轉換，那么就通過一個任意的比例因子與此相乘(*V*在原始論文中有描述)。
<a href="Geo-Paths#interpolate">#</a> d3.geo.**interpolate**(*a*, *b*)
詳見d3.geo.interpolate。
<a name="d3_interpolators" href="#d3_interpolators">#</a> d3.**interpolators**
內置插值器工廠的數組，是d3.interpolate所使用的。額外的插值器工廠可能被添加到這個數組的末尾端。如果它支持可以插入兩個指定的輸入值，那么每個工廠可能會返回一個插值器；否則，工廠將返回一個假值并嘗試返回其他的插值器。
例如，注冊一個自定義插值器用來格式化美元和美分，你可能會寫:
```javascript
d3.interpolators.push(function(a, b) {
var re = /^\$([0-9,.]+)$/, ma, mb, f = d3.format(",.02f");
if ((ma = re.exec(a)) && (mb = re.exec(b))) {
a = parseFloat(ma[1]);
b = parseFloat(mb[1]) - a;
return function(t) {
return "$" + f(a + b * t);
};
}
});
```
然后， `d3.interpolate("$20", "$10")(1/3)`，返回 $16.67；
`d3.interpolate("$20", "$10")(1)` ，返回 $10.00；
`d3.interpolate("$20", "$10")(0)` ，返回 $20.00。
Interpolation部分翻譯來自Harry翻譯的校正。
1-16頁 咕嚕翻譯 2014-11-15 21:36:38
17-26頁 Harry譯 2014-03-30
