D3.js用动画渲染数据集的显示

介绍

数据统计和数据分析离不开数据集。之前几篇博客（用D3.js进行医疗数据可视化 （一）折线图 (Line Chart) 等）基于的是国家卫生和计划生育委员会统计信息中心的数据，可以说是已经经过了加工，提炼总结出来的数据。而本文涉及的是原始数据集。如果按医疗数据来说，可以是电子病历数据，个人健康数据等。但这儿重点介绍动画效果的实现，不涉及任何与特定数据集有关的内容。

前一段时间有点闲暇时间，想玩一玩D3.js中的动画效果。于是立马想到一个经常碰到的场景：原始数据集的可视化。目前有很多网站允许用户上传数据集，然后提供数据管理甚至分析的服务。在展现原始数据集的时候，大多用表格形式来呈现。一般来说，数据集的加载需要一点时间，所以这个过程如果能做的有趣一点，还是一件挺好玩的事儿。

可做的好玩儿的比如原本数据集（以2维为例）就是行X列规规矩矩排排站好，那进入的时候能不能模拟真实世界中站队的规则：一队队先自己排好，然后集合到一块固定的场地。再比如，集合完毕后，把特殊的位置标注出来，比如有缺失数据的地方。等等。

于是就做了一个简单的程序模拟这一过程。效果如下图。我用Chrome插件Gif Cat抓的gif，初始状态不知道为什么没抓下来。当个参考吧。