介绍

数据统计和数据分析离不开数据集。之前几篇博客（用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的错，而是浏览器的问题。不知道大家有没有这方面的资料，推荐一下。

D3.js用动画渲染数据集的显示相关推荐

基于vue的组织架构树组件_Vue组件基于D3.js布局显示树
基于vue的组织架构树组件 Vue.D3.tree (Vue.D3.tree) Update documentationVue components to display graphics based ...
D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
d3.js v5 饼状图（加载动画、悬浮动画、图注以及悬浮提示框）
实现的效果大概是这样: 实现代码如下: <html><body></body><style>div{background: #F2F4FF;width: ...
链接neo4j图形数据库的图像化显示（基于d3.js/neovis.js/neod3.js）
一.基于D3.js (自由度高,写起来麻烦) 二.基于neovis.js (基于d3库,简洁,但样式固定,自由度低.) 三.基于neo4jd3.js (融合neovis与d3,数据格式可用d3\neo ...
d3.js html显示图片,d3.js v4：如何在鼠标点击节点后显示图像
在使用d3.js时仍然相当缺乏经验,我碰到了一个障碍. 希望有人能帮助我.d3.js v4:如何在鼠标点击节点后显示图像我试图在鼠标单击图形中的节点时显示图片. 理想情况下,我想单击几个节点并显示图 ...
D3.js之折线图动画
主要实现的效果一个折线图,然后线条可以从头到尾的出现. 折线图的代码基本上是别人的(本人也是正在学习的),自己只是在这上面基础上添加动画和一些文字和circle 参考:参考折线图的博客参考SVG动画 ...
D3.js实现带动画效果的柱状图
先上效果图,如下图所示: <!DOCTYPE html> <html lang="zh-cn"><head><meta charset=& ...
D3.js SVG绘图实践：波浪动画
效果图 TALK IS CHEAP 源码就50多行,比较好看懂. <!DOCTYPE html> <html><head><meta charset=&quo ...
arcgis js 4 使用d3.js 构建虚线动画（线或者面）
我们来用d3.js 来实现动画虚线可以应用于polyline 首先数据结构定义 let options = { renderer: { type: "simple", symbo ...

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

介绍

加载数据 Load Data

高亮缺失数据 Highlight Missing Data

渲染效率

D3.js用动画渲染数据集的显示相关推荐

最新文章

热门文章