數據產品的前端技術選型的思考

時間 2019-11-05

原文原文鏈接

數據產品首先也是一個web工程，這裏不談是react仍是vue，我的認爲憑喜愛便可。本文想說說關於高交互，多維數據分析，多圖表展現的產品如何選擇工具庫，以及有哪些庫能夠用。css

圖表庫選擇

主流的web圖表庫有：echarts；highcharts；D3js；antv（G2，G6，F2）基於D3封裝的react圖表庫rechart；還有基於G2封裝的react圖表庫viser；Bizcharts，等等。還有關係圖展現使用的Cytoscapejs；時序圖經常使用工具庫visjs等等那麼如何選擇呢？
這是一個哲學命題，沒有什麼是最好的，你開心就好。畢竟被說定製性太強的echarts也是能夠經過底層zrender繪製最自由的shader。因此，接下來咱們是站在工程的角度來分析。html

1 根據項目涉及的圖表複雜度來選擇。

簡單的傳統圖表，最佳搭檔 echarts，highcharts（商業收費），屬於枚舉型圖表。經過配置項來繪圖，所繪製的圖表符合其枚舉出來的圖表類型，或根據既定的規則疊加圖表。用於使用傳統圖表，對圖表設計細節定製要求不高的產品。簡而言之，就是設計師不會跟你pk視覺還原度的圖表。要求：設計師設計要從demo庫中枚舉展現圖表。若是超崗，很差意思做爲前端的你可能就比較痛苦。前端

假如你的設計師比較個性，這時候能夠考慮使用G2繪製。所謂的個性化設計，其實要求是很高的。g2的官網是這麼介紹本身的：vue

G2 是一套基於可視化編碼的圖形語法，以數據驅動，具備高度的易用性和擴展性，用戶無需關注各類繁瑣的實現細節，一條語句便可構建出各類各樣的可交互的統計圖表。react

因此選擇用g2繪製個性化圖表設計是要遵循這套圖形語法的。下圖來自g2官網（www.yuque.com/antv/g2-doc…jquery

若是想要超自由的表達，大量個性化創新型設計，甚至是出現信息可視化（若是你的頁面有不少座標系，且比例尺複雜，或者根本沒有正經座標系和比例尺）。這時候就該使用神器d3js了。堅決果斷，d3能夠繪製任何合理設計的圖表。這裏又提到一個詞「合理設計」，什麼是合理設計，其實就是可以找到數據與圖形映射的關係。也就是設計的圖形位置顏色大小等等都能有明確的規則計算出來。從d3js的slogan咱們就能夠看出，d3js給自身的定義就不單單限制與圖表，它不說本身是xxxchart。而是Data-Driven Documents。如字面意思，數據驅動dom。d3js提供的是數據與dom（圖形）的映射處理。因此咱們能夠分紅，數據源--- 數據映射層（d3）--- 繪圖層（svg / div css / canvas）。d3也提供一個簡易的dom操做工具d3-selection.git

2 根據數據形態選擇工具

其實決定產品形態的最大因素是數據類型。數據類型大體有: 分類數據；量化數據；時序數據；空間數據；關係型數據；分類數據；量化數據；使用到到多數是傳通通計報表。
時序數據：是時間爲主要線索的數據，反應時間變化。這裏推薦一個visjs：visjs.org/timeline_ex… 能夠比較有效的幫助展現時間。同時d3-time與插值器Time Intervals 能夠很好的提供便捷的時間計算。moment也是不錯的工具。github

空間數據，最多見的是地理信息數據，因爲國家統計局要求的中國地圖出處必須合法，並經過審覈。因此，使用d3繪製須要geojson就可能不符合國情且僅適合矢量圖繪製。因此，這裏推薦使用高德和百度地圖，高德封裝了一個可視化工具loca，百度地圖能夠配合echarts使用。

圖：高德數據可視化效果圖

關係型數據，就是你們看到的點線邊數據。包括樹形結構數據。這類數據比較特殊性。可選框架包括：d3-force，g6 ，visjs，Cytoscapejs，cola.js， gephi 等等。這些都是基於力導圖模擬電荷運動計算佈局，因此使用者須要對力導圖碰撞算法，圖算法，三角函數比較熟悉，最好熟悉一下四叉樹八叉樹算法（用於優化檢索效率）。web

圖： Cytoscapejs -demo

3. 圖表工具庫組合使用

正如上文提到的一個概念：數據源--- 數據映射層 --- 繪圖層（svg / div css / canvas）。咱們繪圖的過程能夠分爲這三層。同時，數據源還能在分業務模型和控制層，繪圖層又可分爲，圖形模型與表現層。但使用不一樣但工具，這些分層就會被不一樣層度的組合起來。例如，使用echarts，數據映射層僅僅是經過option的配置來控制，後續繪圖就都交給echarts。
使用d3繪圖就能夠明顯感覺到分層的好處。假設數據已處理好，使用d3作佈局和樣式轉化，繪圖層咱們就能夠交給專業的繪圖庫。例如手寫css！開玩笑～好比：createjs 。甚至使用d3的關係圖佈局算法，組合g6 繪圖能力。只要清楚的各司其職，咱們能夠發揮每一個庫的最大能力。（前提是最好是能按需使用的庫，好在大多數庫都支持）。算法