數據可視化之下發圖實踐

做者：個推前端工程師 東風

隨着互聯網的快速發展，數據維度愈來愈廣，呈現形式也愈加豐富，具備多維度數據特色的相關業務實踐都能經過可視化圖表來展現，好比個推的下發圖，從時間和區域兩個維度，能夠即時、直觀地展示個推數據下發的過程。

1、下發圖的由來
個推下發圖主要用於呈現個推爲APP提供推送服務時數據的下發過程，能夠直觀顯示個推推送觸達到的城市，有利於開發者對下發數據進行分析。

個推下發圖運用了遷徙圖的原理，再經過自主設計開發出的一套可視化展現圖像。這一類型的可視化能夠普遍應用於擁有地理位置信息和數據轉移特徵的數據展現。

2、下發圖的構成
下發圖主要由地圖、地理位置信息，以及飛線組成。以下圖所示：

3、下發圖的技術要點

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的行業分析以及戰略調整有着指導性意義。