D3.js數據可視化

你的淘寶年度消費報告那炫酷的圖表一會兒讓人忘了本身花了多少錢，各大門戶網站、媒體都開始大量使用圖表，因而乎又有一批工具等待咱們學習的路上

什麼是D3.js

D3.js（全稱：Data-Driven Documents）大概翻譯過來就是數據驅動文檔，一看到後綴名的.js就放心了，只要你以前有Javascript的語言基礎就能夠開始D3.js了，其實它就是一個JavaScript庫，和jquery同樣都是封裝好的JS庫，只不過做用不一樣，D3.js主要是作數據可視化的，也就是各類炫酷的圖表，好比折線圖、弦圖、力導向圖等等，而jQuery主要是作頁面DOM控制、AJAX和動畫的。

D3.js和以前用的echarts.js有啥不一樣

D3.js和echarts.js都是用來生成各種圖表的，區別的話能夠從使用方法和實現方式上,echart.js是經過canvas來繪製圖形具體使用方法是經過echarts.init 方法初始化一個 echarts 實例並經過 setOption 方法生成一個簡單的柱狀圖很輕鬆搞定。D3.js經過svg來繪製圖形,使用時須要先建立畫布(svg元素),而後進行各類繪製圖形。

從兼容方面對比二者的話,echart.js兼容到IE6及以上的全部主流瀏覽器，而D3.js兼容IE9及以上以及全部的主流瀏覽器，若是項目考慮兼容IE6，建議使用echart.js

從學習成本上來講,echart.js是封裝好的方法能夠直接調用,學習起來更加快速上手,而相對來講D3.js的學習偏底層學習起來成本較大,也正由於如此D3.js也有更大的靈活性,當你須要的圖表中echart中找不到時能夠來D3中本身搞定

D3.js圖表有多炫酷

這裏能夠看到官方首屏的截圖感覺下

D3.js怎麼使用
在D3官網（https://d3js.org/）選擇Download the latest version (5.5.0) here點擊進行下載，直接將下載的d3.js引入到頁面當中或者經過網絡鏈接進行引入
<script src="http://d3js.org/d3.v3.min.js&...; charset="utf-8"></script>.