在本章中,我们将学习如何设置D3.js开发环境.在我们开始之前,我们需要以下组件 :
D3.js library
编辑
网络浏览器
网络服务器
让我们一起来看看详细步骤逐步完成.
D3.js图书馆
我们需要将D3.js库包含在您的HTML网页中才能使用D3.js创建数据可视化.我们可以通过以下两种方式来减去;
从项目的文件夹中包含D3.js库.
在CDN(内容分发网络)中包含D3.js库.
下载D3.js库
D3.js是一个开源库,该库的源代码可以在网上免费获得 https://d3js.org/网站.访问D3.js网站并下载最新版本的D3.js(d3.zip).截至目前,最新版本为4.6.0.
下载完成后,解压缩文件并查找 d3.min.js .这是D3.js源代码的缩小版本.复制d3.min.js文件并将其粘贴到项目的根文件夹或任何其他要保留所有库文件的文件夹中.在HTML页面中包含d3.min.js文件,如下所示.
示例 : 让我们考虑以下示例.
D3.js是一个JavaScript代码,所以我们应该在"script"标签内写下我们所有的D3代码.我们可能需要操作现有的DOM元素,因此建议在"body"标记结束之前编写D3代码.
从CDN包含D3库
我们可以通过将内容交付网络(CDN)直接链接到我们的HTML页面来使用D3.js库. CDN是托管文件的服务器网络,并根据用户的地理位置提供给用户.如果我们使用CDN,我们不需要下载源代码.
使用CDN URL包含D3.js库 https://d3js.org/d3.v4.min.js 进入我们的页面,如下所示.
示例 : 让我们考虑以下示例.
D3.js编辑
我们需要一个编辑器来开始编写代码.有一些很棒的IDE(集成开发环境)支持JavaScript,比如 :
Visual Studio Code
WebStorm
Eclipse
Sublime Text
这些IDE提供智能代码完成以及支持一些现代JavaScript框架.如果您没有花哨的IDE,您可以随时使用记事本,VI等基本编辑器.
Web浏览器
D3.js正常工作在除IE8及更低版本之外的所有浏览器上.
Web服务器
大多数浏览器直接从本地文件系统提供本地HTML文件.但是,在加载外部数据文件时存在某些限制.在本教程的后面章节中,我们将从外部文件加载数据,如 CSV 和 JSON .因此,如果我们从头开始设置Web服务器,对我们来说会更容易.
您可以使用任何您喜欢和减去的Web服务器;例如IIS,Apache等
查看您的页面
在大多数情况下,我们只需在Web浏览器中打开您的HTML文件即可查看.但是,在加载外部数据源时,运行本地Web服务器并从服务器(http://localhost:8080)查看页面更可靠.