要创建一个精致、流畅、动态的过渡效果,只需简单的一行代码:
```
.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);
```