基於D3可視化的工具配置

　　前期去浙大學習的時候，學到了相對於本身來講比較新的技術，就是基於D3的數據可視化分析，這篇文章咱們先介紹一下怎麼去使用D3，以及D3開發所須要的工具配置。

　　1.編輯器的話我的推薦Visual Studio Code（下載傳送門），VS code是一個輕量且強大的代碼編輯器，支持Windows和Liunx以及Moc OS操做系統，下面介紹一下這款編輯器的安裝步驟，首先點擊連接去官網下載安裝包。

　　下載到自定義目錄

　　而後雙擊安裝，具體操做步驟可自行百度或者參考https://blog.csdn.net/x15011238662/article/details/85094006這篇CSDN文章。

　　2.像這種前端技術，能夠須要瀏覽器的支持咯，推薦Google瀏覽器，也可自行選擇其餘瀏覽器，Google瀏覽器安裝比較簡單，能夠從電腦的360軟件裏面下載，若是沒有，請自行百度，這個是比較簡單的，固然啦，也不必定推薦使用Google，上次看過一篇文章，Google的市場佔有率已經超過一半，一方面說明Google確實強大，深受消費者喜好，但這也是瀏覽器的一大災難，就如十多年前的IE，處於壟斷地位，全部行業標準都由其來制定，沒有競爭，就不能獲得更好的發展（有點偏題的哈，簡單介紹一些知識）

　　3.下面須要安裝Node.js，先簡單介紹一下Node.js。Node.js的是創建在Chrome的JavaScript的運行時，可方便地構建快速，可擴展的網絡應用程序的平臺。Node.js使用事件驅動，非阻塞I/O模型，輕量、高效，能夠完美地處理時時數據，運行在不一樣的設備上。運行react、D3等就須要Node.js的配置。具體可參考這篇CSDN文章仔細查看Node.js的用處http://www.javashuo.com/article/p-qzvfzxzg-h.html。

　　下面介紹怎麼安裝nodejs。windows下的NodeJS安裝是比較方便的（v0.6.0版本以後，支持windows native），只須要到官網（http://nodejs.org/）或者Node.js中文網(http://nodejs.cn/)，即可以看到下載頁面。

　

　　具體的安裝流程網上也有不少，我就不詳細介紹了，推薦一個比較好的安裝教程，https://www.jianshu.com/p/2d9fa3659645，這篇簡書教程比較詳細的介紹瞭如何去安裝Node.js以及如去運行。

 　　4.以上就是前端所須要用到的工具，雖說D3和react是前端語言，但前端的展現離不開後端的支持，後端目前所涉及到的就是利用python，到目前爲止，我所使用的python就是對數據進行處理，下面簡單介紹一下python所用到的工具，使用的比較多的就是pycharm和python的IDLE了，這兩種工具的安裝教程可參考以上兩篇文章（文章裏有百度網盤的安裝包，若是讀者以爲百度網盤下載較慢，可自行進入相應的官網進行下載）。

　　python工具安裝完以後，打開CMD命令行，安裝可能須要用到的庫（安裝時若是報錯，請嘗試用管理員權限：windows用戶就是管理員權限打開行命令，macOS就是在命令前加上sudo）

　　pip install networkx scipy sklearn

　　①networkx用於處理圖數據

　　②scipy+networkx用於生成矩陣

　　③sklearn的PCA和TSNE等用於進行降維

　　以上是python三個獨立的第三方庫，若是安裝較慢，能夠拆分安裝。

　　5.下面給一個react demo，你只要進入vis文件夾，運行如下命令就能夠啓動：

　　通常須要以管理員身份運行cmd，而後cd到VIS的目錄，接下來就是輸入命令：

　　npm i

　　npm start

　　而後打開vscode，就能夠對demo進行修改啦！

　　6.在這裏順便講一下怎麼新建一個react項目，打開cmd命令行，輸入     npm init react-app vis   ，等待數分鐘後（可能會比較久），會在當前目錄下建立一個名爲vis的文件夾。

　　

　　cd vis

　　進入文件夾後，會發現會有不少文件生成，其中src文件夾內存放了代碼。

　　npm start

　　啓動項目，會在瀏覽器中自動打開項目，當你看到以下界面時，說明成功：

　　

　　安裝必要的組件

　　npm install --save-dev d3 antd axios 

• d3

• ant design（可選，實用的框架，好比提供了按鈕等組件，提供了佈局）

  安裝完成後，修改 src/App.css，在文件頂部引入 antd/dist/antd.css。

  @import '~antd/dist/antd.css'; .App { text-align: center; } ...

• axios（可選）

  npm install --save-dev axios

  若是有先後端通信，則能夠實用axios用來通信。

 

　　好了 ，以上就是今天所須要介紹的內容，小弟第一次寫博客，還有不少知識存在欠缺，或者文章有錯誤之處，都是很難避免的，但願你們可以在評論裏指出錯誤，感謝哦！