基于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的用处https://blog.csdn.net/weixin_39214481/article/details/82023696

  下面介绍怎么安装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所用到的工具,使用的比较多的就是pycharmpython的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文件夹内存放了代码。

1561540407396

  npm start

  启动项目,会在浏览器中自动打开项目,当你看到如下界面时,说明成功:

1561540528363

1561540486764

  

  安装必要的组件

  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用来通讯。

  好了 ,以上就是今天所需要介绍的内容,小弟第一次写博客,还有很多知识存在欠缺,或者文章有错误之处,都是很难避免的,希望大家能够在评论里指出错误,感谢哦!

  

猜你喜欢

转载自www.cnblogs.com/zwing/p/11347403.html