16、数据可视化：InfoVis 与 Google Charts 实战

数据可视化：InfoVis 与 Google Charts 实战

1. InfoVis 实现旭日图

1.1 数字更新动画逻辑

在处理时钟数字更新时，每次 animateSeconds 函数被调用（每秒调用一次），会检查数字是否发生变化，若变化则更新其信息。代码如下：

var newDigits = [time.getMinutes()%10,
  parseInt(time.getMinutes()/10),
  time.getHours()%10,
  parseInt(time.getHours()/10)];
var path;
var transPath;
for(var i=0; i<aLast.length; i++){
  if(aLast[i]!=newDigits[i]){
    path = aDigits[i];
    aLast[i] = newDigits[i];    
    transPath = Raphael.transformPath 
    (helveticaForClock[newDigits[i]], aTrans[i]);
    path.animate({path:transPath}, 500);
  }
}

此代码将当前时间的小时和分钟的每一位数字提取出来，存储在 newDigits 数组中。然后遍历 aLast 数组，若发现数字有变化，则更新对应的路径信息并进行动画过渡。

1.2 旭日图简