D3相关-transition （动画）

一、动画相关

1、选中元素添加动画

d3.selectAll('circle').transition().duration(500).style('fill', 'red');   // 动画持续500ms
d3.selectAll('circle').transition().delay(500).style('fill', 'red');  // 延迟500ms后执行动画

2、中止动画

该方法取消指定node上未执行的过渡部分(如果存在未执行的过渡部分)

d3.select('.circle').interrupt();

3、筛选

筛选不存在circle1类的circle图元，添加动画

d3.selectAll('circle').filter(filterFunc).transition().style('fill', 'red');
function filterFunc() {
    return d3.select(this).attr('class') != 'circle1'
}

4、循环动画

实现黄灯每隔500ms的闪烁效果

d3.selectAll('circle').transition().on('start', function repeat() {
    d3.active(this).duration(500).style('fill', 'green')
    .transition().duration(500),style('fill', 'transparent')
    .on('start', repeat)
})

二、属性操作

1、attr、style

2、xxxTween

xxxTween：自定义插值器，相当于是把延迟的过程放到了方法里。有attrTween, styleTween
// 在5s之内把r从原大小变成500px

d3.selectAll('.circle').transition().duration(5000).attrTween("r", function() {
    return d3.interpolateNumber(this.getAttribute("r"), 500)
})

这里需要根据value值使用对应的获取值方法
如果 value 为数值, 使用 interpolateNumber.
如果 value 为 color 或可以被强制转为颜色的字符串, 使用 interpolateRgb.
使用 interpolateString.

3、tween

// 在5s之内把fill 从原颜色变成blue

d3.selectAll('.circle').transition().duration(5000).tween("fill", function() {
    var node = this, i = d3.interpolateRgb(node.getAttribute("fill"), "blue"); // i是一个方法，从原颜色到blue渐变。
    // t 的大小为[0,1]
    return function(t) {
        node.setAttribute("fill", i(t))
    }
})