D3 动画交互模块

过渡

D3 支持动画效果，这种动画效果是基于样式过渡 transition 属性实现的。其补间插值（补间动画）支持多种方式，如线性、弹性等，通过 easing 函数进行设置。此外 D3 除了支持原生的插值方式，如对数值类型、字符类型，还内置了多种插值方式，如复合值。

// 对元素的背景色进行过渡
d3.select('body').transition()
  .style('background-color', 'black');
// 在散点图中调整一系列散点大小的动效，设置不同的延迟
d3.selectAll('circle').transition()
  .duration(750)
  .delay(function(d, i) { return i * 10;})   // 基于数据/节点的索引值设置动效的延迟
  .attr('r', function(d) { return Math.sqrt(d * scale});

提示

由于 D3 基于 Web 标准来设计，因此除了 D3 提供的过渡之外，也可以对 D3 创建的元素使用通用的 CSS 动画来实现过渡效果。