個人感覺前端數據可視化是個趨勢，並且現在所在公司也是有做這塊的項目，雖然我目前還沒有接觸到公司數據可視化的項目，但是，今后總是要接觸的嘛。
今天看了一下公司目前所用的兩種數據可視化工具---D3和ECharts，ECharts由於是國產的，文檔和demo都很全，簡單看了一下，感覺很好上手，沒有必要把太多時間花在ECharts上，反觀D3，中文文檔很匱乏，api講得也不是很易於理解，但是功能很強大啊，所以，我決定開始學習D3。
通過查詢，大概知道了D3就是通過js來操作DOM，包括但不僅限於創建節點、節點綁定數據，所以D3大概就是將源生js操作DOM的方法做了封裝，並且借助H5的svg標簽來繪制圖形；
說到H5的圖形繪制，有svg和canvas；svg是矢量圖，放大不失真，canvas是位圖，放大失真，但是canvas更適合做游戲開發，說到游戲開發就不得不說js游戲引擎了，聽說白鷺引擎挺不錯~咳咳，跑題了。下面開始記錄D3相關API的使用（圖文教程，你值得擁有，如果有不對的地方也歡迎提出）
一、為項目引入D3
我這里是直接在vue項目中引入d3的，項目目錄下：npm i d3
隨便打開一個文件（.vue），切記，這里在main.js里import是無效的，要到用到D3的組件/頁面l里import D3，如下：
import * as d3 from 'd3';
二、開始表演
正如你所看到的的那樣，當前頁面有一個類名為skill的div，里面有兩個空白的p標簽，接下來，我要通過D3為其導入數據：
稍微有點js基礎的都就能看出這句話的意思，只不過這塊有兩個知識點需要提一下：
①鏈式語法，原理就是每個方法執行結束之后返回特定對象或者this對象（具體可查閱java23種設計模式）
②這里的init()數據初始化操作要放在Vue實例的mounted生命周期，created生命周期親測無效（具體參考vue生命周期）
三、檢查結果
ok，就這樣，D3已經在vue項目中成功運行，更多d3相關，敬請期待我后續博客！