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