什么是 D3？
¥What is D3?
D3（或 D3.js）是一个免费的开源 JavaScript 数据可视化库。它基于 Web 标准构建的底层方法为创作动态数据驱动的图形提供了无与伦比的灵活性。十多年来，D3 一直致力于推动突破性且屡获殊荣的可视化成果，成为高级图表库的基础构建块，并在全球范围内培育了一个充满活力的数据从业者社区。
¥D3 (or D3.js) is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. For more than a decade D3 has powered groundbreaking and award-winning visualizations, become a foundational building block of higher-level chart libraries, and fostered a vibrant community of data practitioners around the world.
D3“推动了该字段的增长、多样化和创造力，这是前所未有的”，并且“改变了新闻编辑室、网站和个人作品集中数百万个数据可视化作品的创建方式”，《信息之美》2022 时间考验奖 如此评价。IEEE VIS 2021 时间考验奖 指出：“通过创建一个引人注目且易于 Web 开发者用来创作交互式可视化的框架，作者们无疑为数据可视化进入主流做出了贡献。”[D3] 是本次会议的基石性贡献，尤其对我们整个字段的成功至关重要。
¥D3 “slingshotted the field into growth, diversification and creativity that has been unprecedented” and “changed how millions of data visualizations are created across newsrooms, websites, and personal portfolios,” remarked the Information is Beautiful 2022 Test of Time Award. The IEEE VIS 2021 Test of Time Award noted, “By creating a framework that was compelling and easy for web developers to use to author interactive visualizations, the authors have undeniably helped to bring data visualization to the mainstream. [D3] is a cornerstone contribution to this conference specifically and more generally to the success of our field as a whole.”
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 was created by Mike Bostock in 2011. Mike co-authored the D3 paper with Jeff Heer and Vadim Ogievetsky at Stanford. Jason Davies made major contributions to D3 from 2011 to 2013, most notably to D3’s geographic projection system. Philippe Rivière has been a major contributor to D3 and its documentation since 2016. Over the years, countless kind individuals have contributed to D3 by sharing code and ideas, by teaching and answering questions, and by bringing people together to further the practice of visualization. Mike and Philippe now maintain D3 and Observable Plot at Observable.
D3 是一个低级工具箱
¥D3 is a low-level toolbox
D3 并非传统意义上的图表库。它没有“图表”的概念。使用 D3 可视化数据时，你会组合各种基元。
¥D3 is not a charting library in the traditional sense. It has no concept of “charts”. When you visualize data with D3, you compose a variety of primitives.
要创建 堆叠面积图，你可以使用
¥To make a stacked area chart, you might use
CSV 解析器 用于加载数据，
¥a CSV parser to load data,
时间尺度 表示水平位置 (x)，
¥a time scale for horizontal position (x),
线性比例尺 表示垂直位置 (y)，
¥a linear scale for vertical position (y),
¥an ordinal scale and categorical scheme for color,
堆叠布局 用于排列值，
¥a stack layout for arranging values,
¥an area shape with a linear curve for generating SVG path data,
axes 用于记录位置编码，并且
¥axes for documenting the position encodings, and
selections 用于创建 SVG 元素。
¥selections for creating SVG elements.
这很难理解，对吧？但请深呼吸 - 你不必一次性学习所有内容。每个部分都可以独立使用，因此你可以在将它们组合在一起之前分别学习它们。D3 并非单一的整体式架构，而是一套由 30 个独立的库（或“模块”）组成的套件。我们将这些模块打包在一起是为了方便使用，而非必要，以便你在迭代设计时可以使用这些工具。
¥That’s a lot to take in, right? But take a deep breath — you don’t have to learn everything at once. Each piece can be used independently, so you can learn them individually before you fit them together. D3 is not a single monolith but rather a suite of 30 discrete libraries (or “modules”). We bundle these modules together for convenience rather than necessity so your tools are within reach as you iterate on your design.
D3 工具箱里都有什么？我们建议你浏览文档和示例，以了解与你相关的内容。
¥What all’s in the D3 toolbox? We recommend exploring the documentation and examples to get a sense of what’s relevant to you.
提示
Unless you need D3’s low-level control, we recommend our high-level sister library:Observable Plot。D3 中的直方图可能需要 50 行代码，而 Plot 只需一行代码即可完成！Plot 简洁而富有表现力的 API 让你可以更专注于数据分析和可视化，而不是 Web 开发。你甚至可以将 Plot 和 D3 结合使用，以获得两者的最佳效果。
¥Unless you need D3’s low-level control, we recommend our high-level sister library: Observable Plot. Whereas a histogram in D3 might require 50 lines of code, Plot can do it in one! Plot’s concise yet expressive API lets you focus more on analyzing and visualizing data instead of web development. You can even combine Plot and D3 for the best of both.
D3 非常灵活
¥D3 is flexible
由于 D3 没有总体的“图表”抽象，即使是一个基本的图表也可能需要几十行代码。好处是，所有部分都摆放在你面前，你可以完全控制后续操作。你可以定制可视化效果，以精确实现你的需求。D3 没有默认的数据呈现方式 - 只有你自己编写的代码。（或从示例中复制。）
¥Because D3 has no overarching “chart” abstraction, even a basic chart may require a few dozen lines of code. On the upside, all the pieces are laid out in front of you and you have complete control over what happens. You can tailor the visualization to achieve exactly what you want. D3 has no default presentation of your data — there’s just the code you write yourself. (Or copy from an example.)
将 D3 视为“自己动手”的替代方案，而不是高级图表库的替代方案。如果你对其他工具不满意，并且正在考虑使用 SVG 或 Canvas（甚至 WebGL）制作自己的图表，那么你不妨仔细阅读 D3 的工具箱！这里几乎肯定有一些东西可以帮助你构建梦想中的图表，而不会影响你的创造力。
¥Consider D3 an alternative to “doing everything yourself”, not an alternative to a high-level charting library. If you aren’t satisfied with other tools and you’re thinking of rolling your own charts using SVG or Canvas (or even WebGL), you might as well peruse D3’s toolbox! There’s almost certainly something here that will help you build the chart of your dreams without imposing on your creativity.
D3 可与 Web 配合使用
¥D3 works with the web
D3 不会引入新的图形表示形式；你可以将 D3 直接与 SVG 和 Canvas 等 Web 标准结合使用。
¥D3 doesn’t introduce a new graphical representation; instead, you use D3 directly with web standards such as SVG and Canvas.
“D3”是数据驱动文档 (data-driven documents) 的缩写，其中 documents 指的是代表网页内容的 文档对象模型 (DOM) 标准。虽然 D3 的一些模块（例如 selections 和 transitions）会接触 DOM，但其他模块（包括 scales 和 shapes）仅对数据进行操作。D3 还可以与 React、Vue 和 Svelte 等 Web 框架配对使用；请参阅 入门指南 中的建议。
¥The name “D3” is short for data-driven documents, where documents refers to the Document Object Model (DOM) standard that represents the contents of a webpage. While some of D3’s modules (such as selections and transitions) touch the DOM, others (including scales and shapes) only operate on data. D3 can also be paired with web frameworks such as React, Vue, and Svelte; see the getting started guide for recommendations.
D3 对 Web 标准的采用带来了诸多好处。例如，你可以使用外部样式表来更改图表的外观（即使是为了响应媒体查询，例如响应式图表或暗黑模式）；你可以使用调试器和元素检查器来检查代码的运行情况；D3 的同步、命令式求值模型 - 调用 selection.attr 会立即改变 DOM - 比那些具有复杂异步运行时的框架更容易调试。
¥D3’s embrace of web standards brings many benefits. For example, you can use external stylesheets to alter the appearance of charts (even in response to media queries, say for responsive charts or dark mode); you can use the debugger and element inspector to review what your code is doing; and D3’s synchronous, imperative evaluation model — calling selection.attr immediately mutates the DOM — can make it easier to debug than frameworks with complex asynchronous runtimes.
D3 用于定制可视化
¥D3 is for bespoke visualization
D3 让一切成为可能，但并不一定容易；即使是简单的事情，本应很容易，但往往并非如此。套用 Amanda Cox 的话：“如果你认为为条形图编写一百行代码很正常，请使用 D3。”
¥D3 makes things possible, not necessarily easy; even simple things that should be easy are often not. To paraphrase Amanda Cox: “Use D3 if you think it’s perfectly normal to write a hundred lines of code for a bar chart.”
如果你需要为你的定制可视化提供极致的表现力，则应该考虑使用 D3。D3 对于像《纽约时报》或 The Pudding 这样的媒体机构来说意义非凡，因为在这些机构中，一张图片可能会被数百万读者看到，并且编辑团队可以齐心协力，共同推动视觉传播字段的发展。
¥If you need maximal expressiveness for your bespoke visualization, you should consider D3. D3 makes sense for media organizations such as The New York Times or The Pudding, where a single graphic may be seen by a million readers, and where a team of editors can work together to advance the state of the art in visual communication.
另一方面，D3 对于拼凑私有仪表板或一次性分析来说有些过度了。不要被那些炫酷的例子所迷惑：其中许多方法的实现都花费了巨大的精力！如果你时间紧迫（谁没有时间呢？），使用 Observable Plot 可能会产生更好的可视化或分析效果。
¥On the other hand, D3 is overkill for throwing together a private dashboard or a one-off analysis. Don’t get seduced by whizbang examples: many of them took an immense effort to implement! If you’re constrained by time (and who isn’t?), you’d likely produce a better visualization or analysis with Observable Plot.
D3 用于动态可视化
¥D3 is for dynamic visualization
D3 最新颖的概念是它的 数据连接：给定一组数据和一组 DOM 元素，数据连接允许你对元素的输入、更新和退出应用单独的操作。如果你只创建静态图表（不带动画或不响应用户输入的图表），你可能会觉得这个概念不直观，甚至很奇怪，因为它根本不需要。
¥D3’s most novel concept is its data join: given a set of data and a set of DOM elements, the data join allows you to apply separate operations for entering, updating, and exiting elements. If you’re only creating static charts (charts that don’t animate or respond to user input), you may find this concept unintuitive or even bizarre because it’s not needed.
数据连接的存在是为了让你能够精确控制数据更改时发生的情况，并相应地更新显示。这种直接控制可以实现极高的更新性能 - 你只需修改需要更改的元素和属性，而无需对 DOM 进行 diff 操作 - 并实现状态间流畅的动画过渡。D3 在动态交互式可视化方面表现出色。（尝试在 2012 年的 “通往白宫的 512 条路径” 中按住 Option 键并单击状态切换按钮。真的。）
¥The data join exists so that you can control exactly what happens when your data changes and update the display in response. This direct control allows extremely performant updates — you only touch the elements and attributes that need changing, without diffing the DOM — and smooth animated transitions between states. D3 shines for dynamic, interactive visualizations. (Try option-clicking the state toggles in “512 Paths to the White House” from 2012. Really.)