建立過度有兩種方式；d3.transition 和 selection.transition， 它們都返回一個過度物件。前者是直接建立一個過度物件再指定作用物件，後者是通過作用物件建立過度。

d3.transition([selection], [name])

建立一個過度物件，引數是選擇集。

transition.delay([delay])

設定延遲的時間。過度會經過一定時間後才會開始發生，單位 ms。

transition.duration([duration])

設定過度的持續時間（不包括延遲的時間），單位為ms。如.duration(2000)，是持續2000ms ，即2s。

transition.ease(value[, arguments])

設定過度樣式， 例如線性過度、在目標處彈跳幾次的方式。

下面製作一個過度效果。

在svg區域中新增一個矩形， 矩形的初始寬度為100， 經過過度後， 最終變為 300。程式碼如下：

import * as d3 from 'd3';
export default class Three{
  constructor (dom) {
    this.dom = dom;
  }
  toSvg () {
    let svg = d3.select(this.dom).append('svg').attr('width', 400);
    svg.append('rect')
    .attr('fill', 'steelblue')
    .attr('x', 10)
    .attr('y', 10)
    .attr('width', 0)
    .attr('height', 30)
    .transition()
    .attr('width', 300)
  }
}
 

        上述程式碼只使用了 transition()。預設情況下， 延遲（delay）為0ms，持續時長（duration）為250ms。請注意過渡前後的狀態；

• 過渡前，矩形的寬度（width）為100。
• 過渡後，矩形的寬度為300。

過渡的前後狀態必須不同的，才能看到變化。不同狀態，可以是形狀、顏色、位置、透明度等。

        如果沒有呼叫transition()，append()返回該元素的選擇集物件。如果呼叫了transition()，返回的就不是是選擇集物件，而是一個過度物件

import * as d3 from 'd3'

export default class Three{
  constructor (dom) {
    this.dom = dom;
  }
  toSvgs () {
    const svg = d3.select(this.dom)
      .append('svg')
      .attr('width', 400);
    const rect = svg.append('rect')
      .attr('fill', 'steelblue')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 100)
      .attr('height', 30);
    console.log(rect); // rect是選擇集
    const rectTran = rect.transition(); // 啟動過度效果
    console.log(rectTran); // rectTran 是一個過渡物件
  }
}

        rect是一個選擇集物件， rectTran是一個過渡物件， 它們是完全不同的兩種物件。

        呼叫transition()，得到過渡物件。之後，一般會跟著delay()、duration()、ease()，用於設定延遲，過渡時間、過渡樣式。請看下面的例子：

import * as d3 from 'd3'

export default class Three{
  constructor (dom) {
    this.dom = dom;
  }
  toSvgz () {
    const svg = d3.select(this.dom).append('svg').attr('width', 400);
    const rect = svg.append('rect')
      .attr('fill', 'steelblue')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 100)
      .attr('height', 30);
    const rectTran = rect.transition()
      .delay(500) // 延遲500ms
      .duration(1000) // 過度時長為1000ms
      .ease('bounce') // 過度樣式
      .attr('width', 300) // 目標屬性
  }
}

        上面這段程式碼的過度效果總時長為1500ms，（延遲500ms+過渡時長1000ms），在目標屬性處會彈跳幾次，這是由於過度樣式被設定為bounce。

        另外，transition()可以多次呼叫。每次都會產生一個新的過渡，可以連續使用。請看下面的程式碼：

import * as d3 from 'd3'

export default class Three{
  constructor (dom) {
    this.dom = dom;
  }
  toSvgx () {
    const svg = d3.select(this.dom).append('svg').attr('width', 400);
    const rect = svg.append('rect')
      .attr('fill', 'steelblue')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 100)
      .attr('height', 30);
    const rectTran = rect.transition()
      .attr('width', 300)
      .transition()
      .attr('height', 300)
      .transition()
      .attr('width', 100)
      .transition()
      .attr('height', 100)
  }
}

        第一個過渡是將矩形寬度轉變到300，第二個是將高度轉變到300， 第三個是將寬度轉變到100，第四個是將高度轉變到100.由於沒有設定延遲和過度時間，都使用預設值。