【D3.js in Action 3 精译】1.3 D3 视角下的数据可视化最佳实践（下）

当前内容所在位置

• 第一部分 D3.js 基础知识
  • 第一章 D3.js 简介 ✔️
    • 1.1 何为 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 记事本
    • 1.3 数据可视化最佳实践（上）
    • 1.3 数据可视化最佳实践（下） ✔️
    • 1.4 本章小结 ✔️
  • 第二章 DOM 的操作方法（精译中 ⏳）

（上接第 1.3 小节正文部分：……从下一章开始，我们将着手创建 D3 可视化项目。）

与 Hesham Eissa、Lindsey Poulter 的访谈记录

Eissa 和 Poulter 都是数据可视化领域的设计师兼开发者。

【主持人】你们在一篇博文中写道，在开展 Ben & Jerry’s 项目之前，你们都有在 Tableau 中设计数据可视化的经验。是什么让你们想学习 D3 而不是其他数据可视化工具？（详见 https://heshameissa.com/blog/learn-d3/）

【嘉宾】 我们都很喜欢从很多优秀的可视化作品中汲取灵感，像 The Pudding 官网、Nadieh Bremer（荷兰著名数据可视化设计师）、Information is Beautiful Awards（权威数据可视化设计奖项，2012 年由英国设计师 David McCandless 创立，每年评选和表彰在数据可视化领域取得杰出成就的作品和设计师）以及各种新闻媒体制作的数据新闻作品。我们也注意到在所有这些备受瞩目的作品背后，D3 是它们共有的技术基础。

【嘉宾】 此外，我们俩都热衷于寻找创造性的方式来展示数据，不想被特定软件所提供的可视化功能束缚住手脚。利用 D3 和基于 Web 的可视化设计方案，我们觉得可以创作出任何我们想要的作品来，唯一能限制自己的恐怕就是自己的能力水平了。

【主持人】还是这篇博文，我很喜欢你们安排整个学习过程的这部分内容，因为你们之前没有前端开发的经验，并且能够静下心来一步一步地去做。在这个学习过程中，你们觉得最难的是什么？最享受的又是什么呢？

【嘉宾】 学习的过程中最困难的地方是有太多不同的知识点需要学习和理解；不仅如此，前端开发领域一直在飞速发展，我们还必须紧跟步伐，不断适应不同版本的示例，有时甚至会猛地跳到下一个主题——这也是一种困难，因为当时缺乏充分消化吸收每个知识点的耐心。

【嘉宾】 最令人愉快的，当属我们终于可以学以致用、将所学知识直接应用于数据可视化的那一刻。看到页面最终渲染出了第一个 SVG 图形，那一刻我们欣喜异常。在深入研究不同 D3 模块的过程中，我们乐此不疲地探索着每个模块提供的强大功能，以期在未来大放异彩。像 d3-force 这样极具灵活性和适用性的 D3 模块，真正拓展了我们对数据可视化的思考方式。

【主持人】遇到问题你们都会去哪儿寻求帮助呢？

【嘉宾】 与他人并肩学习的最大好处就在于有一个可以提问的固定搭档。如果我们不理解某个概念，就会互相询问。这样做要么再次印证我们都有困惑，需要花更多时间去研究；要么让一个人有机会以完全不同的方式进行阐释。

【嘉宾】 除了相互交流之外，我们还花了不少精力去了解该领域其他人的代码，看看他们是如何落地某个特定概念的。数据可视化社区最棒的一点就是乐于分享。迈克·博斯托克（Mike Bostock）在 Observable 以及更大的 Observable 社区上提供的 D3 示例往往是我们的救命稻草。通常，我们在创建一个新图表时，首先要看的就是他的示例——99% 的情况下，他都能提供我们需要的内容。The Pudding 网站和 Nadieh Bremer 在各自的 GitHub 账号上都有大量的源码可供参考，所以我们经常会问：“他们是如何实现这样的过渡效果的？”然后找到真正能用的示例。有趣的是，有个周末我们甚至还买了这本《D3.js 实战》的第一版，仅仅是因为当时对某个概念感到困惑，而网上又找不到任何答案。

【嘉宾】 不过也必须承认，有几次我们真的陷入了困境。一方面是我们的词汇量还不够丰富，无法清楚准确地描述需求进而上网搜到相关内容；另一方面则是因为我们总想找到一个很具体的解决方案。我们并不害怕连续花上几天甚至几周的时间去尝试各种方法、做各种实验。但由于没能找到全面了解 Web 数据可视化知识体系的捷径，我们最终不得不潜心积累、认真领悟，而不是简单地复制粘贴。

【主持人】相比与其他数据可视化工具，你们对于 D3.js 有什么特别喜欢、或特别不喜欢的地方吗？

【嘉宾】 D3 需要更多时间来学习如何使用。其他工具可能仅需单击几次鼠标就能创建一个柱状图，而 D3 可能需要 50 多行代码才能实现。不过，这也正是我们最喜欢 D3 的地方——你可以 掌控一切！

项目精选《本杰瑞冰淇淋的内幕》（详见 https://benjerry.heshlindsdataviz.com/）

可视化作品《本杰瑞冰淇淋的 98 种口味》

【主持人】你们共同参与了《Ben & Jerry’s》系列作品的创作，具体分工是怎样的？是一个人专注于设计、另一个人专注于开发，还是两个人共同从事这两方面的工作？

【嘉宾】 我们采取的估计是一种非传统的合作模式。鉴于当时正处于全球大流行病的封锁期高峰，我们反倒有很多时间可供消磨。我们的做法不是分工合作，而是从头到尾学习和关注整个过程。我们会一起制作故事情节图（storyboard）、一起探索数据，然后设定一个目标。我们会说："让我们构建一个和弦图，来展示冰淇淋的新品组合。一旦我们都完成了各自的工作，就会比较各自的代码，看看谁的方法更好，然后合并到一起，再开始下一个任务。一旦我们开始对自己的能力有信心，大概完成一半的时候就会开始分工合作。我们并没有将工作严格地划分为某人固定负责某项任务，只是根据需要互相配合，共同完成所有必要的工作。

【主持人】这个项目同时用到了 SVG 元素和 Canvas 画布。一些作品是基于 SVG 的，比如《本杰瑞冰淇淋完整口味指南》；而另一些主要基于 Canvas，比如像《本杰瑞冰淇淋的 98 种口味》。甚至在和弦图作品《本杰瑞 79 种加料》中结合了二者来进行创作。你们在 SVG 和 Canvas 的取舍上是如何考量的呢？是从一开始就考虑到这样的结构，还是说在实施的过程中出于性能考虑选择了 Canvas 画布呢？

【嘉宾】 我们从一开始就没有考虑过这样的结构。老实讲，起初我们可能连 Canvas 是什么都不清楚。在确定了要创作的可视化内容后，我们才开始着手添加过渡效果，但很快就发现效果非常糟糕。这促使我们开始研究不同的性能参数，并最终选定了 Canvas。

和弦图可视化作品《本杰瑞冰淇淋的 79 种加料》

【主持人】二位已经成功地让整个项目在移动端运行良好，包括丰富的径向可视化效果。这期间是否不得不做出必要的妥协，比如调整原始想法以适应较小的触摸屏之类？在基于 Web 的可视化方面，你们更倾向于移动端优先还是桌面端优先呢？

【嘉宾】 到了后期分而治之阶段，我们最后要考虑的问题之一就是移动端。根据以往的经验，把它留到最后并不是最佳方案，因为有时候不得不做一些让步。我们不仅要搞清楚需要改变什么，还要弄清楚怎样去改变。借助滚动场景叙事（即 scrollytelling，详见 http://mng.bz/g7MV）我们成功解决了移动端的问题：一方面可以让文字在可视化效果上方滚动；另一方面也可以通过突出重要数据的方式来取代之前的交互逻辑。

【嘉宾】 桌面优先的策略固然为可视化提供了更多的施展空间，可以进行更复杂的交互和设计；但移动端会驱使你提炼出每个可视化效果的核心目的，这种做法在试图让整体表达更清楚明了时可能会有帮助。

【主持人】创作这个作品大概花了多长时间？当中有没有哪个环节是相对于其他步骤而言耗费的时间更久、或者难度更大的？

【嘉宾】 由于这是我们第一个真正意义上的 D3 可视化项目，需要不断学习来确保一切尽善尽美，每个部分都要重做很多次，因此在每天投入工作的基础上我们大概花了四个月的时间来完成整个创作过程。最终不得不给我们自己设定一个最后期限，因为我们知道如果不这样做，我们会继续重做、完善并发现问题。

【嘉宾】 至于项目中难度更大、耗时更久的部分，那一定是与前端开发关联更多的内容，涉及可视化方面的反而不多。我们已经完全按照自己的想法设计了所有的可视化内容和叙事场景，但后来才发现，想让这些内容在所有设备和浏览器上都能正常运行并且表现良好，还需要花费更多的时间和精力才能办到。

可视化作品《本杰瑞冰淇淋口味大全》

【主持人】有没有规划过在不久的将来对 D3 的某个具体功能或模块进行探索，或者再深挖一下？

【嘉宾】 当然，有一些知识我们还处于“复制粘贴”的初期阶段，没能完全理解其工作原理，这其中就包括和弦图、桑基图和地理模块等等。此外，掌握更多的数学函数往往可以进一步帮助我们充分利用 D3 提供的强大功能。

---

1.4 本章小结

• 当您想在数据可视化方面拥有完全的创意自由与技术自由时，D3 就是您的首选工具。

• D3 应用程序的样式和服务类似于传统网络内容。

• 我们从不单独使用 D3，而是将其作为技术和工具生态系统的一部分，并将其结合起来创建丰富的 Web 界面，包括：HTML、CSS、JavaScript、SVG、Canvas 以及 React 或 Svelte 等框架。

• 在构建数据可视化时，最常使用的 SVG 图形有：直线（lines）、矩形（rectangles）、圆（circles）、椭圆（ellipses）、路径（paths）及文本（text）。

• 使用 D3 需要对这些几何基元及其主要属性有基本的了解。

• 在使用 D3 之前，应该熟悉 JavaScript 的两个核心知识——方法的链式调用和对象的操作：

  • 方法的链式调用，是在同一对象上相继调用多个方法的一种编程模式（pattern）。
  • 在 D3 中，数据集通常是以对象数组的形式出现的。JavaScript 提供了多种方法来访问和操作其中的数据。

• 作为 D3 开发人员，扎实了解数据可视化的最佳实践至关重要。本章提到的多种资源都可以助您开启学习之旅。

（第一章完）