14、数据可视化动画与开源库应用

数据可视化动画与开源库应用

动画逻辑与交互式图例创建

动画逻辑优化

在动画逻辑中，当从数组中移除元素时，会出现索引值与实际不符的问题。例如以下代码：

}else{
  obj[data.p] = data.to;    
  scope.animQue.splice(i,1);
  --i;
}

在这段代码里，移除元素后，当前的 i 值会比应有的值大 1，因为对象的长度缩小了。为解决此问题，需要强制降低 i 的值，将其重置为新的当前索引。

另外，在每次更新结束时，需要检查数组是否为空。若为空，则移除间隔，避免不必要的间隔运行。代码如下：

if(scope.animQue.length==0){
    clearInterval(scope.interval);
    scope.interval = 0; //reset interval variable
  }

创建交互式图例

准备工作

获取之前的文件 06.03.fade.html 和 06.03.fade.js ，开始创建交互式图例。此示例中会硬编码一些值，但提取动态元素的模块化方法能让类更具可复用性。

具体步骤

1. 创建