做者：个推前端工程师 东风css
随着互联网的快速发展，数据维度愈来愈广，呈现形式也愈加丰富，具备多维度数据特色的相关业务实践都能经过可视化图表来展现，好比个推的下发图，从时间和区域两个维度，能够即时、直观地展示个推数据下发的过程。前端
1、下发图的由来
个推下发图主要用于呈现个推为APP提供推送服务时数据的下发过程，能够直观显示个推推送触达到的城市，有利于开发者对下发数据进行分析。json
个推下发图运用了迁徙图的原理，再经过自主设计开发出的一套可视化展现图像。这一类型的可视化能够普遍应用于拥有地理位置信息和数据转移特征的数据展现。canvas
2、下发图的构成
下发图主要由地图、地理位置信息，以及飞线组成。以下图所示：
前端工程师
3、下发图的技术要点svg
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 是视线的角度。
最终效果以下：
4、技术选型
在进行下发图的技术选型时，个推技术团队对比了 svg 和 canvas 两种技术栈，最后选择了 canvas，而后配合 requestAnimationFrame 画出下发轨迹的帧动画。两款技术栈的具体性能对好比下：
5、总结随着数据维度的扩展和丰富，数据可视化的形态日渐丰富。做为地理位置信息和数据转移特征的数据可视化图表，下发图能够更直观地展示个推为APP提供推送服务时的下发量、下发区域等数据，对APP的行业分析以及战略调整有着指导性意义。