数据可视化之下发图实践

作者：个推前端工程师 东风

随着互联网的快速发展，数据维度越来越广，呈现形式也越发丰富，具有多维度数据特点的相关业务实践都能通过可视化图表来展示，比如个推的下发图，从时间和区域两个维度，可以即时、直观地展现个推数据下发的过程。

一、下发图的由来

个推下发图主要用于呈现个推为APP提供推送服务时数据的下发过程，可以直观显示个推推送触达到的城市，有利于开发者对下发数据进行分析。

个推下发图运用了迁徙图的原理，再通过自主设计开发出的一套可视化展示图像。这一类型的可视化可以广泛应用于拥有地理位置信息和数据转移特征的数据展示。

二、下发图的构成

下发图主要由地图、地理位置信息，以及飞线组成。如下图所示：

三、下发图的技术要点

1.地图
地图可以利用第三方地图服务，也可以自主绘制地图，本文以后者为例。自主绘制的地图主要利用了墨卡托投影原理，将地球正轴圆柱投影，由经纬度信息转化到画布上对应的位置。

本文案例中用了 d3.js 中的 geoMercator 进行墨卡托投影转换。

然后我们可以在阿里云的 datav 中获取地图的 geojson 数据，具体地址可参见括号内链接，（https://datav.aliyun.com/tools/atlas ）再通过 canvas 原生 Api，添加背景色、边框等，就可以画出想要的地图了。

注意：下图中的地图角度透视主要应用了 css 中的 transform，perspective、rotateX、rotateY、rotateZ 等。

遵循上述步骤，一个透视角度的静态地图就绘制完成了。

2.贝塞尔曲线
贝塞尔曲线是计算机图形学中相当重要的参数曲线，它通过一个方程来描述一条曲线，根据方程的最高阶数，又分为线性贝塞尔曲线、二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。

本案例中主要应用了二次贝塞尔曲线，二次贝塞尔曲线的函数如下：
B(t) = (1-t) ²P0 + 2t(1-t)P1 + t²P2, t ∈ [0,1]


上图为本文案例中飞线的贝塞尔曲线应用，其中 from 为起点，to 为终点，curveness 为曲线的曲率，取值-1 ~ 1，曲率的绝对值越大，曲线越弯曲，percent为飞线位置占比。

3.动画
在 canvas 中，动画效果的实现通常是由 window.requestAnimationFrame 循环执行，因此，飞线需要算出每一帧中飞线的状态，以及飞线的入场和离场形态。

4.发光效果
那么下发图的特效具体如何实现呢？首先我们来介绍一下头部发光效果的实现过程：

我们以工业中的HSL色彩模式为颜色标准，通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，HSL即代表色相、饱和度、明度三个通道的颜色，这一标准几乎包括了人类视力所能感知的所有颜色。以此为依据，可以发现光源的发光规律，即光源中心的明亮度最高，由内向外，明亮度依次递减。

所以根据配置的基础颜色，就能获取到顶点发光处颜色的明亮度，大致方法如下：

完成头部发光步骤后，接下来需要打造一个酷炫的形状。发光的头部是一个类似棉签棒的形状，该形状可以用一个半圆和一个三角形来绘制，再根据曲线的切线，获取三角形以及半圆的旋转角度。

完成下发图头部制作后，接下来需要进行尾部的操作，因为canvas自带线性渐变，所以具体代码如下：

canvas 的落地效果呈圆形渐变样式，当飞线到达终点后，完整的落地效果就开始展示，整个画面类似雨滴降落到地面。

5.透视
如果不调整透视角度，贝塞尔曲线的样式如下图所示：

当曲线与下发方向的角度呈90度时，曲率最大；角度为0度或者180度时，曲率最小，与余弦定律相似。

其中 from 是起始位置，to 是终止位置，curveness 是曲线的曲率，angel 是视线的角度。

最终效果如下：

四、技术选型

在进行下发图的技术选型时，个推技术团队对比了 svg 和 canvas 两种技术栈，最后选择了 canvas，然后配合 requestAnimationFrame 画出下发轨迹的帧动画。两款技术栈的具体性能对比如下：

五、总结

随着数据维度的扩展和丰富，数据可视化的形态日渐丰富。作为地理位置信息和数据转移特征的数据可视化图表，下发图可以更直观地展现个推为APP提供推送服务时的下发量、下发区域等数据，对APP的行业分析以及战略调整有着指导性意义。

转载于:https://blog.51cto.com/13031991/2380519