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

介绍

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

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

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

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

 

原理很简单，需要源码的可以从这儿下载。

稍微展开说下目前的实现。

加载数据 Load Data

关键的源码见下面。

          var circles = column.selectAll("circle")
               .data(data[j].data)
               .enter()
               .append("circle")
               .transition()
               .duration(1000)
               .each("start", function(d) {
                     if(d.value == 1){
          d3.select(this)
              .attr("fill", "white")
              .attr("r", 2)
              .attr("cx", width);                       
                     }else if(d.value == 0){
                          d3.select(this)
             .attr("fill", "#222")
              .attr("cx", width);  
                     }
     })
     .delay(function() {
          return j * (3000/datalen);
     })
.ease(easefuns[2]);
         
          circles
               .attr("cx", xScale(data[j].name))
               .attr("cy", function(d, i) {
                     return yScale(d.caze);
               })
               .attr("class", function(d){
                     return"circle" + d.value;
               })
               .each("end", function(d) {
                     if(d.value == 1){
          d3.select(this)
              .transition()
              .duration(500)
              .attr("fill", "white")
              .attr("r", 1);                      
                     }else if(d.value == 0){
                          d3.select(this)
              .transition()
              .duration(500)
              .attr("fill", "#222")
              .attr("r", 1);
                     }
     });
 
     }

加载数据时的动画有几个关键点：

1.    每个点进入屏幕之前的状态，由circles. each("start",function(d) {…})来决定。比如这儿有值的点就渲染成白色大圆点；而缺失值的点就是隐藏的（颜色与背景色相同）。

2.    点从屏幕边缘飞到最终位置的节奏，由circles.delay()和circles.ease()共同决定。circles.delay()设定点进入屏幕的延迟时间。为了让数据点一列一列依次进入，这儿的circles.delay()函数实现将j（列索引）作为了变量，越左边的列进入的越早。有兴趣的同学可以把circles.delay()的返回设成一个常数试试不一样的进入效果。circles.ease()包含了好多可选的缓动函数，规定了数据点从一个位置到另一个位置是如何过渡的。目前使用的是cubic-in-out。模拟的是自然站队场景中快速进入，精确占位的理念。easefuns里面包含了不同的函数，可以试试它们不同的效果。MikeBostock大神已然想到有人会对这些函数好奇，做了一个展示的页面：https://bl.ocks.org/mbostock/248bac3b8e354a9103c4

3.    到达最终位置后的状态，由circles. each("end",function(d) {…})来决定。这儿就把有效点渲染回白色小圆点了。

 

高亮缺失数据 Highlight Missing Data

源码见下面。

     nodes
          .transition()
          .duration(1000)
          .delay(500)
               .attr("fill", "red")
               .attr("r", 3)
          .transition()
          .duration(1000)
               .attr("fill", "#222")
               .attr("r", 1);

这儿主要就是通过nodes.transition()带着动画函数duration()和delay()，并结合各种样式的设置。简单来说，这儿的效果就是先将缺失点高亮成红色大圆点，然后又再次隐藏。

 

渲染效率

最后再扯两句渲染效率。D3.js对动画的渲染有其局限性，就是当节点增多时，效率会逐步降低。源码中包含若干个样例数据集。比如data-20-10.csv表示20列，10行的数据集。当渲染data-20-10.csv、data-200-10.csv时，我的浏览器基本上还能胜任（MacbookPro, Chrome v51）。但对于data-200-100.csv以及更多数据的数据集，能明显感觉到渲染的迟滞。

这个也许不是D3.js的错，而是浏览器的问题。不知道大家有没有这方面的资料，推荐一下。