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

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

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

动画逻辑优化

在动画逻辑中，存在一种特殊情况，当从数组中移除元素时，循环变量 i 的当前值会比预期大，因为对象的长度缩小了。为解决这个问题，需要强制降低 i 的值，使其重置为新的当前索引。示例代码如下：

}else{
  obj[data.p] = data.to;    
  scope.animQue.splice(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. 创建 createLegend 方法 ：