【D3.js in Action 3 精译_004】第一部分 D3.js 基础知识

当前内容所在位置

• 【第一部分 D3.js 基础知识】 ✔️
  • 【第一章 D3.js 简介】 ✔️
    • 【1.1 何为 D3.js？】 ✔️
      • 【1.1.1 Web 可访问数据的可视化需求】 ✔️
      • 1.1.2 D3.js 的适用场景
      • 1.1.3 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 记事本

第一部分 D3.js 基础知识

欢迎来到 D3.js 的世界！可能您已经迫不及待想要构建令人惊叹的数据可视化项目了。我们保证，这一目标很快就能达成！但首先，我们必须确保您已经掌握了 D3.js 的基础知识。这一部分提到的概念将会在您后续的 D3 之旅中反复出现，深入理解这些知识点将助您在今后面对复杂的可视化作品和效果时更加游刃有余。

本书第一章不仅会探讨选择 D3 及其相关生态的原因和场景，还会介绍一些基本概念以支撑您的后续学习，包括：绘制 SVG 图形、利用 JavaScript 操作数据以及方法的链式调用。

接下来的第二章、第三章，我们将利用 D3 来构建一个柱状图。为此，还会介绍 DOM 操作以及数据处理的相关知识。第四、五章还将利用 D3 的图形及布局生成器来构建更复杂的可视化作品。最后还会探讨一个几乎所有数据可视化从业者都绕不开的话题——分布（distributions）。

---

第一章 D3.js 简介

本章概要

• 理解 D3.js 的作用及其背后的设计理念
• 认识与 D3.js 结合并用于创建数据可视化的相关工具
• 借助代码创建并美化可缩放矢量图（SVG）
• 了解数据可视化最佳实践，助力 D3.js 开发之路

鉴于过去十年来市面上涌现出了大量的数据可视化工具，您可能会怀疑 D3 这趟浑水是否还值得一试。咱们就开门见山吧——当下学习 D3 仍然是一个明智的投资之举。尽管 D3 的学习曲线可能会比较陡峭，并且需要付出坚持不懈的努力；但您最终收获的，将不仅仅是其他工具库所提供的各类传统图表的开发能力，此外还能随心所欲地对其进行定制化改造，更重要的是可以实现数据可视化意义上的创作自由，真正打破常规藩篱、直击数据本质、打造出完美贴合受众需求的精品佳作。

D3.js 是互联网上大多数振奋人心的数据可视化作品背后的工具库。无论是制作用于研究的交互式原型、还是绘制响应式的数据仪表盘、抑或是讲述长篇数据故事（例如 Maarten Lambrechts 的作品《布达佩斯、华沙和立陶宛为何一分为二》（“Why Budapest, Warsaw, and Lithuania split themselves in two”），如图 1.1 所示），当您希望拥有完全的创意自由与技术自由时，D3 必将是您的首选工具。

图 1.1 D3 开发者可以访问像地图这样的各种数据格式。图为 Maarten Lambrechts 的作品示例（https://pudding.cool/2019/04/eu-regions/)

本书第一章将介绍 D3 的生态系统，以及在深入探讨数据可视化相关主题前一些至关重要的核心概念，如 SVG 图形、JavaScript 对象操作方法等。

注意

“D3.js”与“D3”的叫法将贯穿全书。二者交替使用，不作区分。

1.1 何为 D3.js？

D3.js，代表 数据驱动文档（Data-Driven Documents），是由 Mike Bostock 于 2011 年创建的一款开源 JavaScript 库，用于生成基于 Web 的动态交互式数据可视化效果。自从 D3 问世以来，许多新的数据可视化工具库相继走进大众视野，但其底层往往都用的是 D3，足见其强大的功能与灵活性。

1.1.1 Web 可访问数据的可视化需求

D3 的诞生就是为了满足可在 Web 端访问的、复杂数据可视化的迫切需求。假设您的公司正使用的一款商业智能工具无法提供团队需要的数据呈现形式。他们希望针对您特定领域构建出一款定制化的仪表盘，用来准确展示客户行为。该仪表板要求反应灵敏、交互良好，并且能在全公司范围内共享。这种情况下，D3 将是一个很自然的选择。

或者再想象一下：您被聘请来创建一个滚动叙事的可视化作品，用以展示 LGBTQ+ 社区权利在过去几十年以及全球范围内的演变历程。该页面应该包含许多有创意的可视化效果，既可以随着用户的交互式滚动而动态更新，又能通过鼠标事件来显示更多详情，还能根据屏幕大小进行自适应调整。那么 D3 无疑是构建这样一个项目的首选工具。

Mike Bostock 创建 D3 的初衷，旨在充分利用新兴的 Web 标准。正如他所言，D3“避免了专属的呈现形式，提供了非凡的灵活性，并充分展示了 CSS3、HTML5 以及 SVG 等 Web 标准的全部功能”（http://d3js.org）。本书撰稿时，D3.js 第七版是该流行工具库的最新迭代版本。通过将 D3 的各部分做模块化处理，现已完全兼容 ECMAScript 模块，可以便捷地将 JavaScript 代码打包重用，以供后续 Web 开发。

D3.js 不仅让开发人员具备创建交互效果极其丰富的应用程序的能力，而且还能像部署传统 Web 项目那样设计样式并提供服务（如图 1.2 所示作品《本&杰瑞的内幕》）。从而使这些项目具备更强的可移植性、更易于增长，同时也更方便维护，即便其他团队成员未必熟悉 D3 的特定语法。

图 1.2 D3 是一个为可视化项目提供完全技术自由与创意自由的底层库。以上和弦图摘自 Hesham Eissa 和 Lindsey Poulter 的合著项目“本&杰瑞的内幕”（https://benjerry.heshlindsdataviz.com/）

Bostock 决心广泛处理数据，并创建出这样一个工具库来：利用它绘制的地图，就如同绘制折线图、网络图或项目列表那样轻松自如。也就是说，开发人员今后再也不必为了绘制地图而去专门学习某个地图工具库的特定语法了；或者专门处理动态文本的、专门绘制网络图的……诸如此类的破事了。相反，一个交互式的可视化网络图的代码近乎纯 JavaScript，而且写法上也与 D3 展示地图动态内容的代码并无二致；它们的实现方法是相同的，甚至数据也可以是相同的：前者以某种方式按节点和链接来组织数据；后者以另一种方式按地图的地理空间来组织数据。尽管 D3 相对于其他工具库而言，学习曲线是陡峭了点，但学习 D3 绝对是稳赚不赔的买卖。

D3 不仅可以创建复杂多样的图形，还可以嵌入用户期望的高级交互功能——这对于现代 Web 开发而言至关重要。有了 D3，从旋转的地球到饼图的一小块，每个图表的每个元素都能以相同的方式实现各类交互效果；更何况 D3 是由精通数据可视化实践的专家亲手打造，因此天生就拥有数据可视化与 Web 开发规范中标准的交互式组件与行为，例如选中网络图中的节点，如图 1.3 所示。

图 1.3 D3 的核心在交互。该网络图中的鼠标交互效果揭示了各组织间的联系及其与所选节点关联的特定信息（详见 http://mng.bz/QROG)。

（未完待续）