交互式数据可视化－D3.js（五）过渡

过渡

过渡效果的起始状态和目标状态都很明确，指定之后元素会从起始状态过渡为目标状态。初始化一个过渡效果，有如下几个方法：
var tran = d3.transition() - 创建一个过渡对象

tran.delay() - 设置延时时间，过渡经过一段时间后才会开始

tran.duration() - 设定过渡的持续时间

tran.ease() - 设定过渡的样式。

tran.attr() - 设置过渡属性

tran.attrTween(name[, factory]) - factory会对每个选中的元素进行调用，并依次传入当前绑定元素的数据

tran.style() - 设置过渡样式;

tran.styleTween() - 设置样式插值

tran.text('value') - 过渡开始时将文本设置为value值

tran.tween(name[, factory]) - 将属性name按照factory插值进行过渡。attrTween和styleTween都是用此函数实现的

在使用过渡时是对于选择集自身的元素来说的，选择集的子元素不受影响。如要使用子元素需要使用d3的选择集，

tran.select() - 符合选择器的第一个子元素进行过渡

tran.selectAll() - 符合选择器的所有子元素进行过渡

tran.filter() - 过滤器与selection.filter()类似

tran.each(function) - 为过渡中的每个选中的元素调用指定的 function, 等价于 selection.each。

大致是使用方法如下：

var dataset = [100, 100, 100]
var svg = d3.select('#transition').append('svg').attr('width', 400).attr('height', 300);
var g = svg.append('g')
var drawRect = g.selectAll('rect').data(dataset).enter().append('rect')
drawRect.attr('fill', '#333').attr('x', 10).attr('y', function(d, i){
    return (i * 35) + 10
}).attr('width', 100).attr('height', 30);
var rectTran = g.transition().select('rect').delay(500).duration(1000).attr('width', 300)