Web开发——D3.js——安装

web王

于 2024-07-04 16:33:10 发布

阅读量396

点赞数 9

文章标签：前端 javascript 开发语言 java

本文链接：https://blog.csdn.net/weixin_53218076/article/details/140178214

版权

在本篇文章中，我们将学习如何设置D3.js开发环境。在我们开始之前，我们要准备以下内容：

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)。

下载完成后，解压缩文件并查找 d3.min.js 。这是D3.js源代码的缩小版本。复制d3.min.js文件并将其粘贴到项目的根文件夹或任何其他要保留所有库文件的文件夹中。即可在HTML页面中包含d3.min.js文件，如下所示。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js是一个JavaScript代码，所以我们应该在"script"标签内写下我们所有的D3代码。我们可能需要操作现有的DOM元素，因此我建议在"body"标记结束之前编写D3代码。

从CDN导入D3.js库

我们可以通过将内容分发网络(CDN)直接链接到我们的HTML页面来使用D3.js库。CDN是托管文件的服务器网络，并根据用户的地理位置提供给用户。如果我们使用CDN就不需要下载源代码。

使用CDN URL导入D3.js库http://d3js.org/d3.v5.min.js进入我们的页面，如下所示。

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "http://d3js.org/d3.v5.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

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服务器并从服务器查看页面更可靠。

web王

关注

9
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Web开发——D3.js——安装

在本篇文章中，我们将学习如何设置D3.js开发环境。在我们开始之前，我们要准备以下内容：D3.js库编辑器浏览器服务器让我们一起来看看详细步骤逐步完成。我们需要将D3.js库包含在我们的HTML网页中才能使用D3.js创建数据可视化。有以下两种方式：从项目的文件夹中包含D3.js库。在CDN(内容分发网络)中包含D3.js库。
复制链接

扫一扫