js 圖表數據可視化

一：D3

含義：D3表明數據驅動文檔，是一個用於建立動態和交互式數據可視化的JavaScript庫。它於2011年首次發佈，包含一組很是靈活和強大的特性，能夠幫助您構建各類圖形數據可視化。

D3.js容許綁定任意數據到DOM，而後將數據驅動轉換應用到Document中。你可使用它用一個數組建立基本的HTML表格，或是利用它的流體過分和交互，用類似的數據建立驚人的SVG條形圖。可以輕鬆的兼容大多數瀏覽器，同時避免對特定框架的以來。

二：echarts

訪問網址：echarts.baidu.com/examples/#c…

內容：echarts中各類圖表類型都含有，如柱狀圖，折線圖，餅圖等等，都含有

三：Antv

訪問網址：antv.alipay.com/zh-cn/index…

內容：antv中含有G6和G2，能夠實現簡單血緣圖的實現

四：d3與echarts的區別

1. 目前各大公司的大數據平臺多使用d3仍是echarts？何時適合用echarts，何時適合用d3?

在我看幾種數據可視化平臺多使用折線圖，面積圖和柱狀圖，條圖居多，對於echarts和d3都有使用。 對於使用d3仍是echarts還得從用戶需求，計算數據的量的大小來進行分析：

(1) 對於客戶需求要求的圖表擁有大量的用戶交互場景，用d3比較方便，由於d3中svg畫圖支持事件處理器，他是基於dom進行操做的。想要實現某個操做，直接調用相關的方法實現效果就行，他那個裏面存在鏈式語法，這個和jQuery的鏈式調用差很少，簡單易讀。

(2) 對於大量的數據展現而且對於用戶交互場景沒什麼要求，就只是展現數據，那我建議使用echarts，若是使用d3的話展現的每個數據都是一個標籤，那麼當數據發生改變的時候這時候圖表會從新渲染，會不停的操做dom，操做dom是很耗費性能的。

(3) 從兼容性方面考慮：echarts兼容到IE6及以上的全部主流瀏覽器，而d3兼容IE9及以上以及全部的主流瀏覽器，若是項目考慮兼容IE6，建議使用echarts。

2. D3和echarts的區別？

D3：

太底層，學習成本大

兼容到IE9以上以及全部的主流瀏覽器

D3經過svg來繪製圖形

能夠自定義事件

Svg：

不依賴分辨率

基於xml繪製圖形，能夠操做dom

支持事件處理器

複雜度高，會減慢頁面的渲染速度

Echarts：

封裝好的方法直接調用

兼容到ie6以及以上的全部主流瀏覽器

echarts經過canvas來繪製圖形

封裝好的，直接用，不能修改

Canvas：

依賴分辨率

基於js繪製圖形

不支持事件處理器

能以png或者jpg的格式保存圖片

3. 通常的交互都用在哪些方面上？

通常的數據交互，後臺返回數據，前端將數據經過圖表的形式展現給用戶。對於這種只是展現數據的話我比較經常使用的是echarts

而像一些鼠標、鍵盤、觸屏事件操做的話，是用d3實現的。由於svg支持事件處理器

當某個事件被監聽到時，d3會把當前的事件存到d3.event對象，裏面保存了當前事件的各類參數。

在使用方面：

Echarts裏面的方法封裝比較好，用的時候直接調用就能實現效果，

對於echarts的使用比較簡單，引入echarts.js，而後就能夠經過 echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法設置圖表實例的配置項以及數據，萬能接口，全部參數和數據的修改均可以經過setOption完成，ECharts 會合並新的參數和數據，而後刷新圖表。若是開啓動畫的話，ECharts 找到兩組數據之間的差別而後經過合適的動畫去表現數據的變化

而d3須要本身添加畫布，繪製圖形，繪製的每個圖形都爲一個對象，能夠添加相應的事件操做，操做dom