資料產品首先也是一個web工程，這裡不談是react還是vue，個人認為憑喜好即可。本文想說說關於高互動，多維資料分析，多圖表展示的產品如何選擇工具庫，以及有哪些庫可以用。

---

圖表庫選擇

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

1 根據專案涉及的圖表複雜度來選擇。

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

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

G2 是一套基於視覺化編碼的圖形語法，以資料驅動，具有高度的易用性和擴充套件性，使用者無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可互動的統計圖表。

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

如果想要超自由的表達，大量個性化創新型設計，甚至是出現資訊視覺化（如果你的頁面有很多座標系，且比例尺複雜，或者根本沒有正經座標系和比例尺）。這時候就該使用神器d3js了。毫不猶豫，d3可以繪製任何合理設計的圖表。這裡又提到一個詞“合理設計”，什麼是合理設計，其實就是能夠找到資料與圖形對映的關係。也就是設計的圖形位置顏色大小等等都能有明確的規則計算出來。從d3js的slogan我們就可以看出，d3js給自身的定義就不僅僅限制與圖表，它不說自己是xxxchart。而是Data-Driven Documents。如字面意思，資料驅動dom。d3js提供的是資料與dom（圖形）的對映處理。所以我們可以分成，資料來源--- 資料對映層（d3）--- 繪圖層（svg / div css / canvas）。d3也提供一個簡易的dom操作工具d3-selection.

2 根據資料形態選擇工具

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

空間資料，最常見的是地理資訊資料，由於國家統計局要求的中國地圖出處必須合法，並通過稽核。所以，使用d3繪製需要geojson就可能不符合國情且僅適合向量圖繪製。所以，這裡推薦使用高德和百度地圖，高德封裝了一個視覺化工具loca，百度地圖可以配合echarts使用。

圖：高德資料視覺化效果圖

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

圖： Cytoscapejs -demo

3. 圖表工具庫組合使用

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

資料處理選擇

immutable js ； lodash ；underscore；原生；d3 ；似乎這裡沒有什麼太多需要解釋。我就不囉嗦了。

附錄

antv： antv.alipay.com/zh-cn/index… echarts：echarts.baidu.com
hightcharts：www.highcharts.com/demo
d3: d3js.org
bizcharts: bizcharts.net/index
visjs: visjs.org/
sparkline(嵌入文字中的小圖表):omnipotent.net/jquery.spar…
cytoscape： js.cytoscape.org/
immutable：facebook.github.io/immutable-j…