什么是 D3？
🌐 What is D3?
D3（或 D3.js）是一个免费的、开源的 JavaScript 库，用于数据可视化。它基于网络标准的低级方法，在创作动态、数据驱动的图形方面提供了无与伦比的灵活性。十多年来，D3 支撑了开创性且屡获大奖的可视化作品，成为高级图表库的基础构建模块，并在全球范围内培养了一个充满活力的数据从业者社区。
Information is Beautiful 2022年时间考验奖评论道，D3“将该字段甩向了前所未有的增长、多样化和创意”并且“改变了数百万数据可视化在新闻编辑室、网站和个人作品集中的创建方式”。IEEE VIS 2021年时间考验奖指出：“通过创建一个对于网页开发者来说既吸引人又易于使用的交互式可视化创作框架，作者无疑帮助将数据可视化带入主流。[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 解析器 来加载数据，
- 水平位置（x）的时间尺度，
- 用于垂直位置（y）的线性刻度，
- 一种用于颜色的序数刻度和分类方案，
- 一种用于排列值的堆叠布局，
- 用于生成 SVG 路径数据的具有 线性曲线 的 区域形状，
- axes 用于记录位置编码，和
- selections 用于创建 SVG 元素。
这信息量很大，对吧？但是深呼吸——你不需要一次学完所有内容。每个部分都可以单独使用，所以你可以先单独学习它们，然后再把它们组合起来。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.
TIP
除非你需要 D3 的低级控制，否则我们推荐使用我们的高级姊妹库：Observable Plot。在 D3 中绘制一个直方图可能需要 50 行代码，而使用 Plot 只需一行！Plot 简明而富有表达力的 API 让你可以更多地专注于数据分析和可视化，而不是网页开发。你甚至可以将 Plot 和 D3 结合使用，以获得两者的最佳效果。
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 的网络标准。
🌐 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 等网页框架配合使用；请参阅 入门指南 以获取推荐内容。
🌐 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 对网页标准的支持带来了许多好处。例如，你可以使用外部样式表来更改图表的外观（甚至可以响应媒体查询，比如用于响应式图表或夜间模式）；你可以使用调试器和元素检查器来查看代码的运行情况；而 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 对于像纽约时报或布丁这样的媒体机构来说是有意义的，因为单个图形可能会被数百万读者看到，而且一组编辑可以一起合作，推动视觉交流的艺术发展。
🌐 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.)