使用JavaScript和D3.js实现数据可视化

最新推荐文章于 2024-06-19 23:13:40 发布

javaQQ群 866865133

最新推荐文章于 2024-06-19 23:13:40 发布

阅读量537

点赞数

文章标签： Java spring 架构师程序员 jvm

本文链接：https://blog.csdn.net/javaQQ561487941/article/details/83048428

版权

本文是一篇关于使用JavaScript库D3.js进行数据可视化的教程，介绍了如何从准备阶段开始，包括设置SVG，添加矩形，设置样式以及添加标签。教程通过创建条形图展示了D3.js的基本用法，适用于熟悉JavaScript、CSS和HTML的开发者。

摘要由CSDN通过智能技术生成

介绍

D3.js是一个JavaScript库。它的全称是Data-Driven Documents（数据驱动文档），并且它被称为一个互动和动态的数据可视化库网络。2011年2月首次发布，在撰写本文时，最新的稳定版本是4.4版本，并且不断更新。D3利用可缩放矢量图形或SVG格式，允许您渲染可放大或缩小的形状，线条和填充，而不会降低质量。本教程将指导您使用JavaScript D3库创建条形图。

准备

为了充分利用本教程，您应该熟悉JavaScript编程语言以及CSS和HTML的知识。

尽管你将使用CSS来进行D3的样式设定，但值得注意的是，很多在HTML上使用的标准的CSS在SVG的使用方式会不一样-也就是说，你会用stroke，而不是border，使用fill而不是color。

我们将使用文本编辑器和Web浏览器。出于测试目的，建议使用工具来检查和调试JavaScript、HTML和CSS，例如Firefox Developer Tools或Chrome DevTools。

第一步 - 创建文件和参考D3

让我们首先创建一个目录来保存我们所有的文件。您可以随意调用它，我们将其称为D3项目。创建后，进入目录。

mkdir D3-project
cd D3-project

要使用D3的功能，您必须在网页中包含d3.js文件。它长约16,000行，大小约500kb。

让我们用curl来将文件下载到我们的目录中。

要下载最适合包含项目的压缩版本，请输入：

curl https://d3js.org/d3.v4.min.js --output d3.min.js

如果您打算阅读D3代码，最好通过输入以下内容来获得未压缩版本：

curl https://d3js.org/d3.v4.js --output d3.js

我们将在本教程中使用d3.min.js文件，请在HTML文件中引用d3.js。

由于D3是模块化的，您可以通过仅拉入您将使用的模块来减小文件大小。

下载D3后，让我们设置CSS和HTML文件。您可以选择要在此文件上使用的文本编辑器，例如nano。我们将从CSS文件style.css开始，以便我们可以立即从HTML文件链接到它。

nano style.css

我们将从一个标准的CSS声明开始，将页面设置为100％高度且无边距。

html, body {
 margin: 0;
 height: 100%;
}

您现在可以保存并关闭CSS文件。

接下来我们将创建我们的JavaScript文件，我们将其命名barchart.js，我们将为此示例制作条形图。使用touch命令创建文件，暂时不编辑。

touch barchart.js

现在，让我们将所有这些元素连接到一个HTML文件，我们将其称之为barchart.html：

nano barchart.html

我们可以像大多数其他HTML文件一样设置此文件，在其中我们将引用我们刚创建的style.css文件、barchart.js文件和脚本d3.min.js。编辑barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Bar Chart</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <!-- Alternatively use d3.js here -->
 <script type="text/javascript" src="d3.min.js"></script>
 </head>
 <body>
 <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

保存并关闭。

第二步 - 在JavaScript中设置SVG

我们现在可以使用我们选择的文本编辑器打开文件barchart.js：

nano barchart.js

让我们首先添加一个数字数组，我们将其用作条形图的基础，编辑barchart.js：

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

接下来，我们需要创建SVG元素。这是我们存储所有图形的地方。在D3中，我们用d3.select来让浏览器搜索元素。

我们可以使用d3.select("body").append("svg");执行此操作。编辑barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];
var svg = d3.select("body").append("svg");

如果我们现在加载barchart.html到我们的Web浏览器中，我们应该能够使用我们的开发人员工具检查DOM或文档对象模型，并将鼠标悬停在SVG框上。

使用JavaScript和D3.js实现数据可视化

回到我们的JavaScript文件中，我们可以将属性链接到SVG，使其成为网页的完整高度和宽度。我们将.attr()用于属性。为了让它更具可读性。确保将分号向下移动到变量声明的末尾。编辑barchart.js

var dat

最低0.47元/天解锁文章

javaQQ群 866865133

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用JavaScript和D3.js实现数据可视化

介绍D3.js是一个JavaScript库。它的全称是Data-Driven Documents（数据驱动文档），并且它被称为一个互动和动态的数据可视化库网络。2011年2月首次发布，在撰写本文时，最新的稳定版本是4.4版本，并且不断更新。D3利用可缩放矢量图形或SVG格式，允许您渲染可放大或缩小的形状，线条和填充，而不会降低质量。本教程将指导您使用JavaScript D3库创建条形图。...
复制链接

扫一扫