过渡
过渡效果的起始状态和目标状态都很明确,指定之后元素会从起始状态过渡为目标状态。初始化一个过渡效果,有如下几个方法: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)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。