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

隨著網際網路的快速發展，資料維度越來越廣，呈現形式也越發豐富，具有多維度資料特點的相關業務實踐都能通過視覺化圖表來展示，比如個推的下發圖，從時間和區域兩個維度，可以即時、直觀地展現個推資料下發的過程。

一、下發圖的由來

個推下發圖主要用於呈現個推為APP提供推送服務時資料的下發過程，可以直觀顯示個推推送觸達到的城市，有利於開發者對下發資料進行分析。

個推下發圖運用了遷徙圖的原理，再通過自主設計開發出的一套視覺化展示影象。這一型別的視覺化可以廣泛應用於擁有地理位置資訊和資料轉移特徵的資料展示。

二、下發圖的構成

下發圖主要由地圖、地理位置資訊，以及飛線組成。如下圖所示：

三、下發圖的技術要點

1.地圖 地圖可以利用第三方地圖服務，也可以自主繪製地圖，本文以後者為例。自主繪製的地圖主要利用了墨卡託投影原理，將地球正軸圓柱投影，由經緯度資訊轉化到畫布上對應的位置。

本文案例中用了 d3.js 中的 geoMercator 進行墨卡託投影轉換。

然後我們可以在阿里雲的 datav 中獲取地圖的 geojson 資料，具體地址可參見括號內連結，（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的行業分析以及戰略調整有著指導性意義。