【D3.js in Action 3 精译_007】1.2 D3 生态系统——入门须知

本文链接：https://blog.youkuaiyun.com/frgod/article/details/139993103

当前内容所在位置

第一部分 D3.js 基础知识
第一章 D3.js 简介
1.1 何为 D3.js？
1.2 D3 生态系统——入门须知
【1.2.1 HTML 与 DOM】 ✔️
1.2.2 SVG - 可缩放矢量图形
【第一部分】 ✔️
第二不分
第三部分

1.2.3 Canvas 与 WebGL
1.2.4 CSS
1.2.5 JavaScript
1.2.6 Node 与 JavaScript 框架
1.2.7 Observable 记事本

1.2 D3 生态系统——入门须知

D3.js 从不单打独斗，而是作为 D3 生态系统的一员，与生态内的一系列技术和工具相结合来创建丰富的 Web 界面。与其他网页一样，D3 项目也是充分利用 HTML5 的强大功能在 DOM 内构建出来的。尽管 D3 也可以创建并操作诸如块级元素（<div>）、列表（<ul>、<ol>）这样的常规 HTML 元素，但主要还是利用 SVG 图形或者在 Canvas 画布内实现想要的可视化效果。Canvas 画布是一个从脚本（scripts）渲染位图图像的 HTML 元素。此外，可能也会用到传统的 CSS 样式表来增强 D3 项目，使其设计更易于维护，尤其是在大型团队中。

鉴于 D3 是一个 JavaScript 库，访问和操作数据时自然会倾向于将 D3 中的方法接口与 JavaScript 原生函数相结合。目前，D3 完全支持 JavaScript 的 ECMAScript 2015（即 ES6）修订版以及大多数最新更新；还能以模块（modules）的形式集成到当下用于构建 Web 项目的最新前端框架中（如 React、Svelte 等）。由于不会污染应用的全局作用域，使用这些模块通常是首选方案。

本节将简要讨论这些技术及其在 D3 生态中起到的作用。由于 SVG 相关的知识对于理解 D3 至关重要，本节还将进一步详细阐释这些需要深入理解的基本概念，以便启动可视化项目的构建。如果您已经熟悉了 HTML、SVG 元素、CSS、JavaScript 及 JavaScript 模块，可以直接跳过本节进入本章 1.3 小节的学习。

1.2.1 HTML 与 DOM

当您访问某个网页，第一个要加载的文件便是如下所示的一个超文本标记语言（或称 HTML）文件。浏览器解析该 HTML 文件并构建出文档对象模型（Document Object Model）——它是网页文档的编程接口。因为它由一组嵌套元素组成，所以人们通常称其为 DOM 树、也叫节点（nodes）或标签（tags）。示例中，<head> 和 <body> 元素是父元素 <html> 的子元素；类似地，<body> 标签是 <h1>、<div> 和 <p> 标签的父元素。<h1> 标题也是 <div> 元素的兄弟（sibling）元素。加载网页时，屏幕上看到的就是包含在 <body> 标签内的各个元素：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">  
    <title>A simple HTML file | D3.js in Action</title>
  </head>
  <body>
    <h1>I am a title</h1>
    <div>
      <p>I am a paragraph.</p>
      <p>I am another paragraph.</p>
    </div>
  </body>
</html>

在 DOM 中，每个元素上的三大类信息共同决定了该元素的行为和外观，即：样式（styles）、attribute 属性和property 属性。其中，样式指定了颜色、大小、边框、不透明度等信息；attribute 属性则包括类（classes）、id 和交互行为。根据处理的元素类型，部分 attribute 属性也可以指定元素外观。以 SVG 元素为例，attribute 属性就能用于设置不同形状的位置、大小及比例等信息。而 property 属性通常用于描述某个状态，例如复选框元素的 checked 就是一个 property 属性，其取值在复选框被选中时为 true，未选中时为 false。虽然 attribute 和 property 可以经常互换使用，但它们是两个不同的概念。一个 attribute 属性在 DOM 树渲染时是以初始状态的形式出现的；而一个 property 属性则是元素当前的状态，并且可以随着用户与界面的交互而变化。本书第二章还会讨论一些 D3 的接口方法，用以生成或修改 HTML 及 SVG 元素的样式与 attribute 属性，敬请期待。

DOM 树还决定了元素的屏幕绘制顺序，子元素将在父元素之后、父元素之内进行绘制。尽管 CSS 的 property 属性 z-index 对常规 HTML 元素的屏幕绘制顺序起到了一定的控制作用，但 SVG 元素会严格遵循它们在 DOM 中出现的顺序。根据计算机图形学中的画家模型（painter’s model）原理，后绘制的内容会显示在先绘制的内容之上。

1.2.2 SVG - 可缩放矢量图形

可伸缩矢量图形（Scalable Vector Graphics，即 SVG）的引入从根本上改变了网络的面貌。SVG 图形在短短几年内就成为了主要的 Web 开发工具。与栅格图形（如 PNG 和 JPG 格式图片）由微小像素构成、并且像素点在放大倍数过高时清晰可见的设计理念不同，矢量图形则是基于数学和几何学构建而成的，能够在任何尺寸、任何屏幕分辨率下保持清晰的外观。SVG 图形的另一个重要优势是可以直接注入到 DOM 中，不仅可以让开发人员直接操作该元素并添加动画效果，而且还可以供屏幕阅读器访问。如果构建得当，SVG 图形也能具备高性能，其文件大小仅为相同效果的栅格图像的一小部分。

用 D3 来创作数据可视化作品，通常会将 SVG 图形注入 DOM，通过修改它们的 attribute 属性来生成各种可视化视觉元素。了解 SVG 的工作原理、主要图形及其主导视觉呈现的 attribute 属性，对大多数 D3 项目而言至关重要。本节后续内容将逐一介绍整个 D3 项目中会被反复重用的 SVG 形状。如果您对 SVG 还不太熟悉，请务必花点时间与我们一起敲敲代码。我们承诺这将大幅降低您未来使用 D3 的难度。

如何访问代码文件

本书的每一章都包含了编程练习（code-along exercises），旨在进一步提升学习体验。强烈建议您在阅读本书时“动手”实践，而不仅仅满足于“阅读”学习。完成每一章设置的练习环节，可以让您更好地消化吸收所学知识，并尽快开始构建您自己的 D3 项目。

对于每个练习项目，您都可以访问现成的源代码文件，在本书的 Github 仓库（http://mng.bz/Xqjv）中找到它们。如果熟悉 Git，还可以克隆该仓库到您本地计算机，或者下载对应的压缩文件。

示意图：从 GitHub 仓库下载源码文件

每个章节都有各自的文件夹，包含一个或多个练习。每个练习都按章节顺序进行了编号。练习包括一个 start 文件夹，其中包含开始练习所需的所有文件；而在 end 文件夹中有对应练习的完整参考答案。根据您在每一章、各个小节的学习进展，您既可以沿用上一小节练习后的代码，也可以使用与当前小节对应的代码文件夹进行练习，两种方式殊途同归。