d3.js 之增长感染力：使用转场效果

转场/transition

图形比数据有感染力，动起来的图形比静态的图形更有感染力。

转场是一种过渡，提供两个稳定状态间的一种动态渐进的变化。转场的概念来源于电影。 电影中存在不一样场景之间的切换，好比，从室内镜头切换到室外镜头。直接拼接两段 胶片很生硬，因此在后期处理中，会将前一个镜头渐渐隐去，后一个镜头渐渐浮现，这个 在镜头间插入的变化过程就是转场。

转场虽然也是一种动画实现，可是和咱们一般看到的基于帧的动画不一样（好比：游戏）， d3的转场/transition是基于差值的动画，这意味着咱们只须要 声明可视化元素显示属性的初始值和最终值，d3将 自动地构造完整的动画过程。

创建转场对象

使用选择集的transition()方法为当前选择集启动一个转场效果，不过， 从开发者的角度来说，咱们说，这个方法返回了一个转场对象：

1. selection.transition([name])

参数name指定所建立转场效果对象的名字，不指定该参数时使用默认值""（空字符串）做为名字。 这个参数的用途在于启动多个转场效果：若是在一个指定的DOM元素上启动一个新的转场效果， 与其同名的过渡效果将被终止。

转场时长

转场效果有一个默认的时长：250ms，咱们能够使用duration()操做符修改这个转场时长：

1. transition.duration([value])

若是不指定转场时长参数value，duration()操做符就返回当前的默认时长值。

在示例（http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/）增长感染力第一页的代码中，为了能看清过渡效果，我设置了一个2秒的转场时间。你能够试着调整一下， 看看变换在哪里？

转场也是一个集合对象

和选择集/selection同样，转场效果/transition也是一个集合对象：包含一组DOM元素。转场 也有一些和选择集同样的选择符，好比attr()、style()和text()等，用来对所管理的DOM元素 进行属性的修改：

和选择集不一样的是，转场对象对DOM元素的修改不是当即完成的，它会对每一个 DOM元素启动一个17ms间隔的定时器用来逐步地修改DOM元素的属性（咱们 已经知道，这些定时器默认只会持续250ms，因此不用担忧浏览器撑不住）。

转场的计算过程

在上面的图中，第一个style()是在选择集上执行的，这意味着这些div元素的y坐标 初始值被设定为10px；第二个style()是在转场对象上执行的，这意味着 这些div元素的y坐标的目标值被设定为100px，而它们将在250ms内逐渐移动 到这个位置。

转场对象根据这些值，进行了一个简短的计算：

1. 在250ms内，转场对象须要绘制：
2. 250/17≈ 14（次）
3. 每次绘制，DIV元素须要移动：
4. (100-10)/14 ≈ 6.4（px）

根据这个值在每次定时器触发时进行绘制，转场效果就实现了。

tween：定制转场计算过程

前面的示例中，咱们使用style()操做符指定了一组DOM元素 的top属性的起始值和终止值，看起来transition()方法本身 完成了动画中整个的计算过程。

这只是便于理解API用途的方便说法，计算机没那么聪明。计算逻辑实际 上是在转场对象的style()调用时肯定的。

tween

转场过程的计算细节，咱们能够使用tween()操做符指定：

1. transition.tween(name,factory)

• name：字符串，标识factory参数指定的tween工厂。
• factory：tween工厂函数，该函数应当返回一个tween函数。转场对象 在每帧（17ms）对每一个DOM对象调用tween函数来执行计算过程。

相似于访问器函数，tween工厂函数被调用时将传入当前DOM对象对应 的数据和其顺序，并将this指向当前DOM对象，tween工厂函数的定义以下：

1. //tween工厂函数定义
2. function factory(datum,index){
3. //this指向当前DOM对象
4. //返回tween函数，将在每帧时每一个DOM对象上被调用
5. return function(t){
6. //在这里修改DOM元素的属性
7. };
8. }

请注意，转场对象在每帧刷新时调用的是tween工厂函数返回的tween函数，参数t表明 归一到0~1区间的时间值，好比，默认的250ms转场时间，那么0ms对应0，125ms对应 0.5，250ms对应1.0。

转场的attr()操做符和style()操做符，其内部实现都是使用 的tween()操做符。看看→_→的示例代码，你能理解style()是 怎么运做的了吧。

easing：控制动画的速度

咱们看到，tween函数封装了插值动画计算的细节，它接受一个归一化的时间值t 做为参数，咱们根据这个时间值进行计算，最终表现为可视元素的运动或形态的变化。

在默认状况下，转场对象利用一个简单的公式计算应给传给tween函数的时间值t：

1. t = elapsed/duration;

好比，默认的转场时间是250ms，从转场开始到如今已通过了100ms，那么：t = 100/250 =0.4。

那么，若是咱们在传入tween以前改变一下这个t呢？好比，让t在开始时增加的慢些， 最后忽然快起来，会有怎样的视觉效果？

在tween函数看来，开始时时间过得慢了，因此运动也会在开始时慢了!

d3中easing就是这个意思，经过调整时间的映射，来影响tween的执行效果：

1. transition.ease([value[, arguments]])

参数value若是是一个字符串，转场对象将使用预置的easing效果进行时间映射。 参数value也能够是一个函数，用来指定对时间t的映射，因此它有一个参数t，返回值 也应当在0~1范围内。转场对象将在每一帧调用tween函数以前，先使用这个函数对时间进行 变换。

预置的ease效果

d3预置了几种ease效果：

• linear
• cubic
• cubic-in-out
• sin
• sin-out
• exp
• circle
• back
• bounce

style：设置样式目标值

style()操做符用来设置转场集中每一个DOM元素的CSS样式目标值：

1. transition.style(name,value[,priority])

name参数指定样式名称。style()操做符使用转场集中这些DOM元素的 CSS样式的当前值做为初始值，value指定的值做为最终值，构造一个tween 工厂函数加入到转场集的tween序列中，在每帧时被调用。

当value参数是一个具体值时，全部的DOM元素的CSS样式都被设置为这个值。 value参数也能够是一个访问器函数，这意味着每一个DOM元素 的样式目标值能够各自不一样。

同时定义多个样式目标

能够使用对象方式同时定义几个样式的目标值：

1. d3.selectAll(".ball").transition().style({background:'red',width:200,height:200});

你可能好奇插值怎么会能处理JSON对象。是的，插值只能用在数字上。但d3为了方便咱们，内部 进行了处理。因此，尽管用好了。

attr：设置属性目标值

attr()操做符用来设置转场集中每一个DOM元素的指定属性的目标值：

1. transition.attr(name,value)

name参数指定属性名称。attr()操做符使用转场集中这些DOM元素的 属性当前值做为初始值，value指定的值做为最终值，构造一个tween 工厂函数加入到转场集的tween序列中，在每帧时被调用。

当value参数是一个具体值时，全部的DOM元素的指定属性都被设置为这个值。 value参数也能够是一个访问器函数，这意味着每一个DOM元素 的属性目标值能够各自不一样。

对于HTML元素，咱们一般使用style()操做符来指定显示效果，不多使用 attr()操做符。

而SVG元素，有些效果必须设置在属性上，因此，在使用SVG作可视化元素时，常常 会使用attr()操做符。

参考资料：http://www.hubwiz.com/