基于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用来通信。

 

　　好了 ，以上就是今天所须要介绍的内容，小弟第一次写博客，还有不少知识存在欠缺，或者文章有错误之处，都是很难避免的，但愿你们可以在评论里指出错误，感谢哦！