数据可视化之MarkPoint
转自fu*k原文 数据可视化之MarkPoint
MarkPoint是什么效果?如上图,一闪一闪亮晶晶的效果,这是在Echarts中对应的效果。我最早看到的是腾讯的一个Flash的版本,显示当前QQ在线人数的全国分布效果,感觉效果很炫,当时也在想,怎么用JS,HTML5来做出类似的效果,但说实话,没什么思路,甚至怀疑JS是否做不出来这种逼真的效果来。终于看到Echarts中提供了这个功能。下面就扒开她绚丽的衣着,一起走进MarkPoint的世界。
数据
首先还是先看看数据上的逻辑。上图是一个数据格式,placeList包括每一个关键点的名称和坐标位置,而在风格中主要有name,可以设置为强中弱三种,分别对应MarkPoint图中白蓝绿三种效果,类型是中国地图,而具体的风格在存储在markPoint字段中。我们在看看markPoint字段里面是什么内容。
如上就是markPoint里面的主要内容,这里,每一个点是一个钻石(diamond)的样式,符号大小,还有一个effect的属性,这就是它的动画风格,而data则用来加载placeList的信息。
综上所述,对于使用者而言,指定好要显示markPoint的位置,也就是placeList,然后在赋予它们的具体效果,中国范围,强弱类型以及具体的形状(钻石,矩形或圆形等),这样就可以得到MarkPoint这样的闪烁效果。
原理
其实说原理有点夸大其词。通过数据层面,可以看出来每一个点都是独立的,如果你放大后,基本可以判断出来各自完成自己的动画效果,并一致循环下去。如果缩小后,你会发现所有的markPoint并不是同步的,频率各不相同,显得杂乱无章。(推荐TED的视频:The First Secret of Great Design - Tony Fadell - TED Talks)。
这样,这个问题就分解成了两个部分:
-
如何模拟每一个点的闪烁效果
-
如何管理大规模的点的闪烁周期
闪烁效果的实现
如上,是同一个markPoint在不同帧下的效果,大家可以想想一下这样一个从小到大然后再到小的过程,则完成了闪烁的效果,如果你足够细心会发现里面有一个blur的平滑效果,这样会让闪烁有一个平滑的效果,类似字体的抗锯齿,看起来有一种朦胧的感觉。当然,blur这个效果是怎么实现的?其实在之前风向图和热点图中都采用了这个技术,就是和上一帧的图片进行一个半透明的叠加。然后在配合一个动画特效(animation effect),闪烁的效果就完成了。
多点闪烁动画的实现
如上是在某一帧的截图。俗话说的好,一花独放不是春,所以如何控制这么多的点,风格各不相同的markPoint,而且频率各不相同,这就涉及到动画类和随机数之间的内容,同时在框架上能够贯穿整个渲染周期。
我们看一下在Echarts上的流程,先是初始化的流程:
如同,MarkPoint的数据初始化主要是Map类读取数据,然后在Base中调用getLargeMarkPointShape来创建这些点。
在Base中,调用animationEffect指定单个MarkPoint的闪烁风格,这里需要额外说明一下,虽然在数据中动画风格只是简单的show:true.但实际上,最终是采用的config.js中默认的动画风格,比如周期,是否循环,跳动等,如下图所示:
而在ecEffect中,调用largePoint来随机设置,实现各自不同的动画周期。从而完成整改初始化的过程。
初始化结束后,则进入到了渲染阶段。渲染是采用的zrender框架,而markPoint则是由Animation来驱动,每一帧都会调用update,在onframe中来设置每一个点当前的状态,比如大小,根据时间周期下,线性插值计算出它应该的大小(下面会详细说明),最后调用Symbol::buildPath实现所有markPoint的闪烁效果。
这就是初始化准备和渲染周期的大致一个过程,下面对主要功能模块进行介绍
实现代码
如上,只是指定了blur为true,则实现了平滑效果,简单不?其实这用了一个双缓存的技术,在zrender中有一个Layer对象,每一帧都会叠加上一帧的效果,并保存。具体的实现可以参阅zrender的Layer类,比较简单。
闪烁动画有点复杂,首先,怎么控制一个markPoint从大到小的这样一个线性变换的过程,动画类是如何控制的,另外对于不同的markPoint,有这么多点,同一帧下每个点对应的风格也不尽相同,这又是如何控制的。
首先,这要介绍一下zrender中的Animation类,一个非常好用强大的类,先看看使用代码,如下:
首先,这是一个when.js风格的使用方式,该动画主要用来控制effectShape的‘style’属性,即每一帧来对style属性进行更新。那更新什么内容呢?这就是clip对象了。
这里有四个when,再加上最上面的随机的初始大小,也就是说一个周期有5个控制点,其中clip1 = 100,而clip2 = 0,,这里对应的是该控制点对应markPoint的size的百分比。也就是在这个周期中,按照如下的插值算法来控制该点的size。不知道说清楚了没有,可以自己调试一下代码看看。
这是在一帧下插值计算当前size的百分比,这里采用的线性插值,还有其他多种算法可以选择,这里是size,所以用的最简单的线性插值,你也可以实现轨迹,或者加速度等不同的公式来实现对应的效果。
插值计算完了,付给对应的style中randomMap+i属性上。这里,一共常见了20个Animation类,这样就会有20个动画效果,来实现频率各自不同的闪烁效果。最后会调用zrender的refresh,最终来到Symbol的渲染阶段。这里,每一个点根据自己的索引选择对应的缩放比例percent,然后进入下面的绘制阶段。
另外,在对每一个点的渲染函数中,进行了进一步的优化,代码如下,根据大小进行了简化。
Ok,到此,我想到的关于MarkPoint的内容都已经完毕,另外这个类涉及到一个大规模点渲染,等有机会对这方面详细研究后在和大家分享。
相关文章
- 【华为云技术分享】基于小熊派STM32芯片的通过MQTT上报JSON数据到华为物联网平台的自动售货机Demo解析
- 非一般的数据挖掘机:关联规则法
- 数据可视化工具大集合
- 大数据基础之Ambari(2)通过Ambari部署ElasticSearch(ELK)
- 大数据谁掌控?
- 利用R语言制作出漂亮的交互数据可视化
- 小白学数据分析--数据指标 累计用户数的使用
- 数据技术初学者不用再东搜西找了,一篇文章解读20个最新数据技术概念
- PCL——modelnet40_normal数据集.txt文件转.pcd并可视化
- 【PyTorch】教程:可视化数据,模型和训练过程
- 【实战】数据可视化系统后端开发环境搭建
- SAP Cloud for Customer的产品主数据通过PI同步到CRM
- CRM客户主数据UI上有哪些字段可以触发partner determination
- Fiori UI上my contact加了Dr. 后搜索不出数据的奇怪问题
- XAI之ALE:基于titanic泰坦尼克数据集对RF算法利用ALE累积局部效应图可视化算法进而实现模型可解释性案例
- ML之R:通过数据预处理(缺失值/异常值/特殊值的处理/长尾转正态分布/目标log变换/柱形图-箱形图-小提琴图可视化/构造特征/特征筛选)利用算法实现二手汽车产品交易价格回归预测之详细攻略
- Python:利用python编程将上海十六区,2020年5月份房价实时地图(数据来源房天下)进行柱状图、热图可视化
- Python之pandas:将dataframe数据写入到xls表格的多个sheet内(防止写入数据循环覆盖sheet表)
- python采集《保你*平安》评论数据并作可视化分析
- python采集天气数据 并做数据可视化 (含完整源代码)
- 数学建模学习(108):帮助小白快速实现批量机器学习建模训练和批量的数据可视化
- 云图说丨Astro Canvas一站式数据可视化开发,分钟级构建业务大屏
- 再见matplotlib,7 个必须尝试的 Python 数据可视化库!
- 【阶段二】Python数据分析数据可视化工具使用04篇:核密度估计图
- elasticdump备份迁移ES集群数据——筑梦之路
- IPython:利用python语言将后缀为ipynb文件中的输出的图片在py文件中编程进行可视化—即如何将IPython.core.display.HTML类型的数据进行图表可视化