D3.js - 概念

D3.js - 核心概念

D3.js（全称 Data-Driven Documents，数据驱动文档）是一个强大的 JavaScript 库，用于在 Web 浏览器中生成动态、交互式的数据可视化。它利用 Web 标准，使用 HTML、SVG 和 CSS 将数据变得生动有趣。D3.js 的主要功能包括：

数据驱动的 DOM 操作： D3 允许你将任意数据绑定到文档对象模型（DOM）元素上，然后对文档应用数据驱动的转换。
生成可视形状： 它可以根据数据生成 HTML 或 SVG 元素，构建图表和图形的基本块。
布局算法： D3 提供了各种可视化布局算法（layout algorithms），包括线性布局、层级布局（hierarchical）（如树状图 trees 和矩形树图 treemaps）、网络布局（network）（如力导向图 force-directed graphs）和地理布局（geographic）（地图 maps）。
平滑过渡和动画： 它支持 UI 状态之间的流畅动画，提升用户体验。
用户交互： D3 简化了创建响应用户输入的交互式可视化。

Web 标准基础

D3.js 基于并广泛使用了几个基础的 Web 标准。扎实理解这些标准对于精通 D3.js 至关重要：

超文本标记语言（HTML）： 用于创建网页和 Web 应用程序的标准标记语言。
文档对象模型（DOM）： HTML 和 XML 文档的编程接口。它表示页面的结构，以便程序可以改变文档结构、样式和内容。
层叠样式表（CSS）： 用于描述使用 HTML 或 SVG 等标记语言编写的文档呈现样式的样式表语言。
可伸缩矢量图形（SVG）： 一种基于 XML 的矢量图像格式，用于二维图形，支持交互性和动画。
JavaScript（JS）： 一种遵循 ECMAScript 规范的高级解释型编程语言。D3.js 是一个 JavaScript 库。

让我们简要回顾一下这些在 D3.js 环境下的应用。

超文本标记语言 (HTML)

HTML 为 Web 内容提供基本结构。D3.js 可以操作任何 HTML 元素，尽管它最著名的是与 SVG 一起用于创建复杂的图形。

一个最小的 HTML5 文档结构：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8"/>
  <title>My D3 Page</title>
 </head>
 <body>
  <!-- D3.js 可视化通常会放置在这里 -->
 </body>
</html>

文档对象模型 (DOM)

当浏览器加载 HTML 页面时，它会创建该页面的 DOM 表示。DOM 是一个树状结构，其中每个 HTML 标签成为一个元素（或节点）。D3.js 擅长选择这些 DOM 元素，并根据数据修改它们（例如，改变属性、样式或附加新元素）。

考虑这个简单的 HTML：

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>DOM Example</title>
 </head>
 <body>
  <div>
   <h1>Greeting</h1>
   <p>Hello World!</p>
  </div>
 </body>
</html>

此 HTML 的 DOM 可以可视化为一个层级结构（hierarchy）：html 是根节点，head 和 body 是其子节点。body 包含一个 div，div 又包含一个 h1 和一个 p 元素。D3 的选择集方法可以遍历这个树。

层叠样式表 (CSS)

CSS 控制 HTML 和 SVG 元素的视觉呈现。D3.js 可以使用 .style() 方法动态改变元素的样式（例如，颜色、大小、位置），通常基于数据值。你也可以在外部 CSS 文件或 <style> 标签中定义样式，然后使用 D3 通过 .attr('class', ...) 设置 CSS 类来应用它们。

可伸缩矢量图形 (SVG)

SVG 是 D3.js 创建复杂图表和图形的主要画布。由于 SVG 元素是 DOM 的一部分，D3 可以像创建、选择和修改 HTML 元素一样操作它们。SVG 的矢量特性确保图形在任何比例下都清晰锐利。

SVG 绘图区域由 <svg> 标签定义。在其中，你可以放置 <rect>、<circle>、<line> 和 <path> 等形状。

示例：一个带有矩形的 SVG 画布：

<!-- 在 HTML 的 body 中 -->
<svg width="500" height="500">
  <rect x="0" y="0" width="300" height="200" fill="yellow" />
</svg>

此代码片段定义了一个 500x500 像素的 SVG 绘图区域，并在左上角 (0,0) 绘制了一个 300x200 像素的黄色矩形。D3.js 可以用于动态创建这样的 SVG 结构。例如，使矩形变为黄色的 fill 属性可以由数据决定。

JavaScript

JavaScript 是 D3.js 的编写语言，也是你与 D3.js 交互时使用的语言。现代 JavaScript（ES6 及更高版本）的特性，如用于变量声明的 const/let、箭头函数、Promise 和模块等，常与 D3 一起使用。扎实的 JavaScript 基础知识（变量 variables、函数 functions、数组 arrays、对象 objects、控制流 control flow、异步操作 asynchronous operations）是有效使用 D3.js 的前提条件。