【D3.js in Action 3 精译】第二章 DOM 的操作方法

当前内容所在位置

• 第一部分 D3.js 基础知识
  • 第一章 D3.js 简介（已完结）
    • 1.1 何为 D3.js？
    • 1.2 D3 生态系统——入门须知
    • 1.3 数据可视化最佳实践（上）
    • 1.3 数据可视化最佳实践（下）
    • 1.4 本章小结
  • 第二章 DOM 的操作方法 ✔️
    • 2.1 第一个 D3 可视化图表 ✔️
    • 2.2 环境准备（部分） ✔️
      • 2.2.1 首个 D3 项目的结构（精译中 ⏳）
      • 2.2.2 将 D3 加载到项目中（待译）

第二章 DOM 操作

本章概要

• 搭建 D3 项目本地开发环境
• 从 DOM 中选择元素
• 将 HTML 或 SVG 元素添加到选中元素中
• 设置和修改 DOM 元素的属性（attributes）和样式

在介绍完 D3 的生态系统后，接下来就是动手实战了！本章将进行首个可视化项目的基础设置，同时学习如何使用 D3 操作文档对象模型（即 DOM）。

操作 DOM 是 D3 的一项基础功能，本章介绍的技术将是 D3 开发者最常用到的技术（只要没用过像 React 或 Svelte 这样的 JavaScript 框架的都算，框架相关的话题将在本书第 8 章重点讨论）。首先介绍选择集（selections），它可以从 DOM 中获取单个或多个元素；用 D3 来选中元素是非常简单和直观的。有了选择集，再来看看能用它做点什么。D3 项目中经常执行的一类操作是向选择集添加 HTML 内容或 SVG 元素。例如，为了创建可视化效果，通常会在 SVG 容器中添加各种 SVG 图形。最后，通过设置 SVG 图形的属性和样式来调整其位置、大小和颜色。

由于本书的重点是在本地开发环境中构建项目，因此在深入学习 D3 技术之前，您得先搭建一个本地的开发环境。本章第 2.2 小节将介绍 Visual Studio Code（即 VS Code）及其 Live Server 扩展插件的用法，只用几分钟就能搭好本地开发环境。

2.1 第一个 D3 可视化图表

在本章及下一章中，我们都将聚焦首个 D3 可视化图表的开发——如图 2.1 所示的条形图。虽然第一章中提到过，D3 未必是绘制简单经典图表的最有效工具，但条形图却是了解 D3 基本概念的完美切入点。只要紧跟我们的节奏，很快您就能打牢基础，轻松构建出复杂的可视化效果。

图 2.1 最受数据可视化从业者欢迎的技术对比图。本章将介绍该条形图的构建方法（资料来源：数据可视化协会《2021 年数据可视化行业现状调查》)

条形图中的数据出自数据可视化协会（www.datavisualizationsociety.org）开展的《2021 年数据可视化行业状况调查》。

在参与该调查的 2181 名数据可视化从业者中，既有专业人士，也有学生和业余爱好者。本书仅选取其中一个问卷题目作为示例——“您经常使用哪些技术来实现数据的可视化？”。受访者可以从预设的列表中选择所有适用的工具。如图 2.1 所示，该条形图垂直列出了各种工具，每个横条的长度代表了选择该工具的受访者人数。根据这项调查，D3 排在数据可视化工具前十名的末尾。让我们开始吧！

注意

数据可视化协会每年都会进行一次行业现状调查。了解行业的最新情况，获取最新数据请访问 www.datavisualizationsociety.org/survey。

2.2 环境准备

在开始使用 D3 之前，需要定好项目构建和运行的具体位置。可以使用在线代码编辑器，如 Observable（https://observablehq.com)）或 CodePen（https://codepen.io）。它们都非常适合快速测试及代码共享。但由于本书的主要目的是做足准备工作，以便后续将构建好的 D3 项目发布到网站或部署到 Web 应用中，因此我们选择搭建本地开发环境。

一听到搭建开发环境的您可曾心生畏惧？其实大可不必。过去那种花上半天工夫汗流浃背地搭建开发环境的日子早已一去不复返了。有了现代化的工具，首次搭建整个过程要不了几分钟就搞定了，之后只需点一下按钮就能运行项目。

您可能会问：为什么不能像第一章的 SVG 图形画廊那样，直接用浏览器打开 HTML 文件呢？虽然这么做有时也的确很不错，但最终会导致浏览器拒绝执行特定任务而出错。为了安全起见，有些浏览器会禁止通过 JavaScript 加载本地文件，转而要求通过 Web 服务器进行加载。D3 项目通常需要加载数据文件，因此必须搭一个 Web 服务器。

本书使用的代码编辑器是 VS Code。VS Code 经常和一个第三方的扩展插件 Live Server 搭配使用，后者就能提供一个本地 Web 服务器环境。不过，如果你已经有了自己喜欢的解决方案，可以直接跳转到第 2.2.1 小节。

注意

本书第一部分中介绍的项目结构较为琐碎、略显土气。这样安排旨在让环境搭建尽可能简单，以专注于 D3 的学习。对于想要基于模块（module-based）来构建项目的高阶开发者，完全可以通过 NPM（Node Package Manager，即 Node 的包管理工具）来安装 D3 并将起导入文件，相关操作详见本书后续第 8 章第 8.2 小节。

VS Code 在开发人员中颇受欢迎。它不仅免费、开源、易用，且功能强大。VS Code 内置了 Git 命令（无需再单独打开一个命令行终端窗口）而且高度可定制。如果您还没有安装 VS Code，可以从 VS Code 网站 https://code.visualstudio.com/Download 进行下载。安装成功后，再到 VS Code 的扩展市场安装 Live Server 插件。如需帮助，请参阅 附录 A。该附录介绍了如何通过 Live Server 扩展启动和停止本地 Web 服务器。

注意

如果还没有下载本书源代码，请从随书 GitHub 仓库（http://mng.bz/Xqjv）进行下载。本章将使用本章代码文件的 start 文件夹。如果卡住了，需要查看解决方案，可以在对应的 end 文件夹进行查看。使用本章代码文件时，编辑器只需打开一个 start 或 end 文件夹即可；若同时打开所有文件、并通过 Live Server 建立 Web 服务，某些路径（例如将数据集加载到项目中）将无法正常工作。源代码文件按子章节（sections）进行组织，因此当进入本书某个新的子章节时，既可以在之前的源码环境中尝试学习，也可以从该章节对应的文件夹中重新开始。两种方案殊途同归。

（未完待续）