Transition过渡效果的初始状态和目标状态非常清晰，指定后元素会从初始状态过渡到目标状态。初始化一个转场效果，有以下方法：vartran=d3.transition()-创建一个转场对象tran.delay()-设置延迟时间，转场会在一段时间后开始tran.duration()-set指定过渡的持续时间tran.ease()-设置过渡的样式。tran.attr()-设置过渡属性tran.attrTween(name[,factory])-工厂会调用每个选中的元素，依次传入当前绑定元素的数据tran.style()-设置过渡样式;tran.styleTween()-设置样式插值tran.text('value')-在过渡开始时将文本设置为值tran.tween(name[,factory])-根据工厂插值的过渡属性名称。attrTween和styleTween都是用这个函数实现的。使用transition时，是针对选择集本身的元素，选择集的子元素不受影响。如果要使用子元素，则需要使用d3的选择集，tran.select()——第一个匹配到transition选择器的子元素tran.selectAll()——所有匹配到transition选择器的子元素tran.filter()-过滤器类似于selection.filter()tran.each(function)-为过渡中的每个选定元素调用指定的函数，相当于selection.each。大致是使用方法如下：vardataset=[100,100,100]varsvg=d3.select('#transition').append('svg').attr('width',400).attr('height',300);varg=svg.append('g')vardrawRect=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('高度',30);varrectTran=g.transition().select('rect').delay(500).duration(1000).attr('宽度',300)
