要創建一個精致、流暢、動態的過渡效果,只需簡單的一行代碼:
```
.transition()
```
要注意的是,需要在選集之后調用。
```
svg.selectAll('circle').data(dataset)
.transition()
.attr(......)
....
;
```
動畫持續時間可以用 .duration()設置。
```
.duration(1000) //一定要放在transition后面
```
如果你想讓動作不是線性變化的,可以使用ease()方法設置各種動作(緩動)。
```
.ease(d3.easeLinear) //在transition后面
```
```
d3.easeCircleIn //漸入并加速
```
```
d3.easeElasticOut //彈性
```
```
d3.easeBounceOut //像皮球一樣反復彈跳,最后慢慢停下來
```
```
d3.easeCubicInOut //默認動畫
```
延長動畫時間
```
.delay(1000)
```
下面我用幾個方法來調整實體的透明度。
```
.attr('opacity', 0)
.transition()
.delay(1000)
.duration(5000)
.attr('opacity', 1);
```