D3.js - 概念

D3.js 是一个开源的 JavaScript 库，用于：

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

Web 标准

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

超文本标记语言 (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 不是直接的图像，而只是一种使用文本创建图像的方法。顾名思义，它是一种可缩放矢量。它会根据浏览器的尺寸自动缩放，因此调整浏览器大小不会使图像变形。除 IE8 及以下版本外，所有浏览器都支持 SVG。数据可视化是视觉表示，使用 SVG 通过 D3.js 呈现可视化非常方便。

可以将 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 的先决条件。

打印页面