什么是 D3？

D3（或 D3.js）是一个用于数据可视化的免费开源 JavaScript 库。它基于 Web 标准的低级方法提供了无与伦比的灵活性，可以创作动态的、数据驱动的图形。十多年来，D3 推动了突破性和屡获殊荣的可视化，成为更高级图表库的基础构建模块，并培养了全球数据从业者的充满活力的社区。

D3 “将该领域推向了前所未有的增长、多元化和创造力”，并“改变了新闻机构、网站和个人作品集中数百万数据可视化的创建方式”，信息是美丽 2022 年时间考验奖如是评论。IEEE VIS 2021 年时间考验奖指出，“通过创建一个让 Web 开发人员能够轻松地创作交互式可视化的框架，作者毫无疑问地帮助将数据可视化带入了主流。[D3] 是对本会议的基石贡献，更广泛地说，也是我们领域整体成功的基石。”

D3 由 Mike Bostock 于 2011 年创建。Mike 与斯坦福大学的 Jeff Heer 和 Vadim Ogievetsky 共同撰写了 D3 论文。Jason Davies 从 2011 年到 2013 年对 D3 做出了重大贡献，最值得注意的是对 D3 的地理投影系统的贡献。Philippe Rivière 从 2016 年起一直是 D3 及其文档的主要贡献者。多年来，无数善良的人通过分享代码和想法、通过教学和解答问题，以及通过将人们聚集在一起以促进可视化实践来为 D3 做出了贡献。Mike 和 Philippe 现在在 Observable 上维护 D3 和 Observable Plot。

D3 是一个低级工具箱

D3 不是传统意义上的图表库。它没有“图表”的概念。当您使用 D3 可视化数据时，您会组合各种基元。

要制作一个 堆叠面积图，您可能会使用

• CSV 解析器 加载数据，
• 时间刻度 用于水平位置（x），
• 线性刻度 用于垂直位置（y），
• 序数刻度 和 分类方案 用于颜色，
• 堆叠布局 用于排列值，
• 面积形状 以及带有 线性曲线 的用于生成 SVG 路径数据的，
• 轴 用于记录位置编码，以及
• 选择 用于创建 SVG 元素。

有很多东西要学习，对吧？但深呼吸——您不必一次学习所有内容。每个部分都可以独立使用，因此您可以在将它们组合在一起之前单独学习它们。D3 不是一个单一的整体，而是一套 30 个独立的库（或“模块”）。我们出于方便而不是必要性将这些模块捆绑在一起，这样您在迭代设计时就可以触手可及。

D3 工具箱里都有些什么？我们建议您浏览文档和示例，以了解哪些与您相关。

提示

除非您需要 D3 的低级控制，否则我们建议使用我们高级的姐妹库：Observable Plot。在 D3 中，直方图可能需要 50 行代码，而 Plot 只需要一行代码！Plot 简洁但表达力强的 API 使您能够更多地专注于分析和可视化数据，而不是 Web 开发。您甚至可以将 Plot 和 D3 结合使用，以获得两者的优势。

D3 很灵活

由于 D3 没有“图表”的抽象概念，因此即使是最基本的图表也可能需要几十行代码。好处是，所有部分都摆在你面前，你可以完全控制发生的事情。您可以调整可视化效果以精确地实现您想要的效果。D3 没有您数据的默认演示——只有您自己编写的代码。（或从示例中复制。）

将 D3 视为“自己做所有事情”的替代方案，而不是高级图表库的替代方案。如果您对其他工具不满意，并且正在考虑使用 SVG 或 Canvas（甚至 WebGL）滚动自己的图表，那么您不妨浏览一下 D3 的工具箱！这里几乎肯定会有东西可以帮助您构建梦寐以求的图表，而不会影响您的创造力。

D3 与 Web 配合使用

D3 不会引入新的图形表示形式；相反，您可以直接使用 D3 与 Web 标准（例如 SVG 和 Canvas）配合使用。

名称“D3”是数据驱动的文档的缩写，其中文档指的是 文档对象模型 (DOM) 标准，它表示网页的内容。虽然 D3 的一些模块（例如 选择 和 转换）涉及 DOM，但其他模块（包括 刻度 和 形状）只对数据进行操作。D3 也可以与 React、Vue 和 Svelte 等 Web 框架配对；有关建议，请参阅 入门指南。

D3 对 Web 标准的采用带来了许多好处。例如，您可以使用外部样式表来更改图表的外观（即使是响应媒体查询，例如响应式图表或深色模式）；您可以使用调试器和元素检查器来查看您的代码在做什么；而 D3 的同步、命令式评估模型——立即调用 选择.attr 会修改 DOM——可以使其比具有复杂异步运行时的框架更容易调试。

D3 用于定制可视化

D3 使事情成为可能，但不一定容易；即使是一些应该很容易的事情，通常也不容易。用 Amanda Cox 的话说：“如果您认为为一个条形图编写一百行代码是完全正常的，那么就使用 D3。”

如果您需要为定制可视化提供最大的表现力，则应考虑使用 D3。D3 对像纽约时报或The Pudding 等媒体机构很有意义，他们的单幅图形可能被一百万读者看到，并且编辑团队可以共同努力来推进视觉传达的艺术水平。

另一方面，对于拼凑私有仪表板或一次性分析而言，D3 过于复杂。不要被炫目的示例所吸引：它们中的许多都是经过巨大努力才实现的！如果您受到时间的限制（谁没有？），那么您更有可能使用 Observable Plot 制作出更好的可视化或分析结果。

D3 用于动态可视化

D3 最新颖的概念是它的 数据连接：给定一组数据和一组 DOM 元素，数据连接允许您对进入、更新和退出元素应用单独的操作。如果您只创建静态图表（不会动画化或响应用户输入的图表），您可能会发现这个概念不直观甚至很奇怪，因为它不需要。

数据连接存在是为了让您能够完全控制数据发生变化时会发生什么，并相应地更新显示。这种直接控制允许极其高效的更新——您只触碰需要更改的元素和属性，而不会对 DOM 进行差异化——以及状态之间平滑的动画转换。D3 非常适合动态、交互式可视化。（尝试在 “通往白宫的 512 条道路”（2012 年）中点击选项卡状态切换按钮。真的。）