D3.js - 快速指南

D3.js - 简介

数据可视化是以图形或图形格式呈现数据。数据可视化的主要目标是通过统计图形、图表和信息图形清晰有效地传达信息。

数据可视化帮助我们快速有效地传达我们的见解。由可视化表示的任何类型的数据都允许用户比较数据、生成分析报告、理解模式，从而帮助他们做出决策。数据可视化可以是交互式的，以便用户分析图表中的特定数据。那么，数据可视化可以使用不同的 JavaScript 框架开发并集成到常规网站甚至移动应用程序中。

什么是 D3.js？

D3.js 是一个 JavaScript 库，用于在浏览器中创建交互式可视化效果。D3.js 库允许我们在数据集的上下文中操作网页的元素。这些元素可以是HTML、SVG或Canvas 元素，并且可以根据数据集的内容引入、删除或编辑。它是一个用于操作 DOM 对象的库。D3.js 可以为数据探索提供宝贵的帮助，它使您能够控制数据的表示并允许您添加交互性。

为什么我们需要 D3.js？

与其他库相比，D3.js 是首要框架之一。这是因为它可以在网络上运行，并且其数据可视化效果非常出色。它如此有效的另一个原因是它的灵活性。由于它与现有 Web 技术无缝协作，并且可以操作文档对象模型的任何部分，因此它与客户端 Web 技术堆栈（HTML、CSS 和 SVG）一样灵活。它拥有强大的社区支持并且更容易学习。

D3.js 特点

D3.js 是最好的数据可视化框架之一，它可用于生成简单和复杂的可视化以及用户交互和过渡效果。下面列出了它的一些显着特征 -

极其灵活。
易于使用且快速。
支持大型数据集。
声明式编程。
代码可重用性。
具有多种曲线生成功能。
将数据与 html 页面中的一个元素或一组元素相关联。

D3.js 的好处

D3.js 是一个开源项目，无需任何插件即可运行。它需要的代码非常少，并具有以下优点 -

出色的数据可视化。
它是模块化的。您可以下载一小段您想要使用的 D3.js。无需每次都加载整个库。
轻松构建图表组件。
DOM 操作。

在下一章中，我们将了解如何在我们的系统上安装 D3.js。

D3.js - 安装

在本章中，我们将学习如何设置D3.js开发环境。在开始之前，我们需要以下组件 -

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)。截至目前，最新版本为4.6.0。

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

示例- 让我们考虑以下示例。

<!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 代码，因此我们应该将所有 D3 代码编写在“script”标签内。我们可能需要操作现有的 DOM 元素，因此建议将 D3 代码编写在“body”标签末尾之前。

包含来自 CDN 的 D3 库

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

使用 CDN URL https://d3js.org/d3.v4.min.js将 D3.js 库包含到我们的页面中，如下所示。

示例- 让我们考虑以下示例。

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

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

D3.js 编辑器

我们需要一个编辑器来开始编写您的代码。有一些很棒的 IDE（集成开发环境）支持 JavaScript，例如：

视觉工作室代码
网络风暴
蚀
崇高的文字

这些 IDE 提供智能代码完成功能并支持一些现代 JavaScript 框架。如果您没有精美的 IDE，您始终可以使用基本的编辑器，如记事本、VI 等。

网页浏览器

D3.js 适用于除 IE8 及更低版本之外的所有浏览器。

网络服务器

大多数浏览器直接从本地文件系统提供本地 HTML 文件。但是，加载外部数据文件时存在某些限制。在本教程的后面几章中，我们将从CSV和JSON等外部文件加载数据。因此，如果我们从一开始就设置 Web 服务器，对我们来说会更容易。

您可以使用任何您熟悉的 Web 服务器，例如 IIS、Apache 等。

查看您的页面

在大多数情况下，我们只需在网络浏览器中打开您的 HTML 文件即可查看。但是，在加载外部数据源时，运行本地 Web 服务器并从服务器查看页面(http://localhost:8080)更为可靠。

D3.js - 概念

D3.js 是一个开源 JavaScript 库 -

文档对象模型 (DOM) 的数据驱动操作。
处理数据和形状。
为线性、分层、网络和地理数据布置视觉元素。
实现用户界面 (UI) 状态之间的平滑过渡。
实现有效的用户交互。

网络标准

在开始使用 D3.js 创建可视化之前，我们需要熟悉 Web 标准。D3.js 中大量使用以下 Web 标准。

超文本标记语言 (HTML)
文档对象模型 (DOM)
层叠样式表 (CSS)
可缩放矢量图形 (SVG)
JavaScript

让我们一一详细了解这些 Web 标准。

超文本标记语言 (HTML)

众所周知，HTML 用于构建网页内容。它存储在扩展名为“.html”的文本文件中。

示例- 一个典型的简单 HTML 示例如下所示

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

文档对象模型 (DOM)

当浏览器加载 HTML 页面时，它会转换为分层结构。HTML 中的每个标签都会转换为具有父子层次结构的 DOM 中的元素/对象。它使我们的 HTML 更具逻辑结构。一旦 DOM 形成，操作（添加/修改/删除）页面上的元素就变得更加容易。

让我们使用以下 HTML 文档来理解 DOM -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

上述HTML文档的文档对象模型如下，

层叠样式表 (CSS)

HTML 为网页提供了结构，而 CSS 样式则使网页看起来更美观。CSS 是一种样式表语言，用于描述以 HTML 或 XML（包括 SVG 或 XHTML 等 XML 方言）编写的文档的呈现方式。CSS 描述了元素如何在网页上呈现。

可缩放矢量图形 (SVG)

SVG 是一种在网页上渲染图像的方法。SVG 不是直接图像，而只是使用文本创建图像的一种方式。顾名思义，它是一个可伸缩向量。它会根据浏览器的大小自行缩放，因此调整浏览器的大小不会使图像变形。除 IE 8 及以下版本外，所有浏览器都支持 SVG。数据可视化是视觉表示，使用 D3.js 使用 SVG 来渲染可视化非常方便。

将 SVG 视为一块画布，我们可以在上面绘制不同的形状。首先，让我们创建一个 SVG 标签 -

<svg width = "500" height = "500"></<svg>

SVG 的默认测量单位是像素，因此我们不需要指定单位是否为像素。现在，如果我们想绘制一个矩形，我们可以使用下面的代码来绘制它 -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

我们可以在 SVG 中绘制其他形状，例如直线、圆形、椭圆形、文本和路径。

就像 HTML 元素的样式一样，SVG 元素的样式也很简单。让我们将矩形的背景颜色设置为黄色。为此，我们需要添加一个属性“fill”并将值指定为黄色，如下所示 -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScript 是一种松散类型的客户端脚本语言，在用户的浏览器中执行。JavaScript 与 HTML 元素（DOM 元素）交互，以使 Web 用户界面具有交互性。JavaScript 实现ECMAScript 标准，其中包括基于 ECMA-262 规范的核心功能以及不基于 ECMAScript 标准的其他功能。JavaScript 知识是 D3.js 的先决条件。

D3.js - 选择

选择是 D3.js 中的核心概念之一。它基于 CSS 选择器。它允许我们选择网页中的一个或多个元素。此外，它允许我们修改、追加或删除与预定义数据集相关的元素。在本章中，我们将了解如何使用选择来创建数据可视化。

D3.js 有助于使用以下两种方法从 HTML 页面中选择元素 -

select() - 通过匹配给定的 CSS 选择器仅选择一个 DOM 元素。如果给定 CSS 选择器有多个元素，则它仅选择第一个元素。
selectAll() - 通过匹配给定的 CSS 选择器来选择所有 DOM 元素。如果您熟悉使用 jQuery 选择元素，D3.js 选择器几乎是相同的。

让我们详细介绍一下每种方法。

select() 方法

select() 方法根据 CSS 选择器选择 HTML 元素。在 CSS 选择器中，您可以通过以下三种方式定义和访问 HTML 元素 -

HTML 元素的标签（例如 div、h1、p、span 等）
HTML 元素的类名
HTML 元素的 ID

让我们通过示例来看看它的实际效果。

按标签选择

您可以使用其标签来选择 HTML 元素。以下语法用于选择“div”标签元素，

d3.select(“div”)

示例- 创建页面“select_by_tag.html”并添加以下更改，

D3.js - 快速指南

D3.js - 简介

什么是 D3.js？

为什么我们需要 D3.js？

D3.js 特点

D3.js 的好处

D3.js - 安装

D3.js 库

下载 D3.js 库

包含来自 CDN 的 D3 库

D3.js 编辑器

网页浏览器

网络服务器

查看您的页面

D3.js - 概念

网络标准

超文本标记语言 (HTML)

文档对象模型 (DOM)

层叠样式表 (CSS)

可缩放矢量图形 (SVG)

JavaScript

D3.js - 选择

select() 方法

按标签选择

按类别名称选择

按ID选择

添加 DOM 元素

append() 方法

text() 方法

修改元素

html() 方法

attr() 方法

style() 方法

classed() 方法

selectAll() 方法

D3.js - 数据连接

什么是数据连接？

数据连接如何工作？

超文本标记语言

D3.js代码

数据连接方法

datum() 方法

data() 方法

Enter() 方法

exit() 方法

数据功能

D3.js - SVG 简介

SVG的特点

一个最小的例子

使用 D3.js 的 SVG

矩形元素

圆形元素

椭圆单元

D3.js - SVG 转换

SVG 转换简介

一个最小的例子

使用 D3.js 进行转换

变换库

D3.js - 过渡

过渡()方法

一个最小的例子

D3.js - 动画