【D3.js in Action 3 精译_030】3.5 给 D3 条形图加注图表标签（下）：Krisztina Szűcs 人物专访 + 3.6 本章小结

当前内容所在位置（可进入专栏查看其他译好的章节内容）

• 第一部分 D3.js 基础知识
  • 第一章 D3.js 简介（已完结）
    • 1.1 何为 D3.js？
    • 1.2 D3 生态系统——入门须知
    • 1.3 数据可视化最佳实践（上）
    • 1.3 数据可视化最佳实践（下）
    • 1.4 本章小结
  • 第二章 DOM 的操作方法（已完结）
    • 2.1 第一个 D3 可视化图表
    • 2.2 环境准备
    • 2.3 用 D3 选中页面元素
    • 2.4 向选择集添加元素
    • 2.5 用 D3 设置与修改元素属性
    • 2.6 用 D3 设置与修改元素样式
    • 2.7 本章小结
  • 第三章 数据的处理 ✔️
    • 3.1 理解数据（已完结）
    • 3.2 准备数据（已完结）
    • 3.3 将数据绑定到 DOM 元素（已完结）
      • 3.3.1 利用数据给 DOM 属性动态赋值
    • 3.4 让数据适应屏幕（已完结）
      • 3.4.1 比例尺简介（上篇）
      • 3.4.2 线性比例尺（中篇）
        • 3.4.2.1 基于 Mocha 测试 D3 线性比例尺（DIY 实战）
      • 3.4.3 分段比例尺（下篇）
        • 3.4.3.1 使用 Observable 在线绘制 D3 条形图（DIY 实战）
    • 3.5 加注图表标签（上篇）
      • 3.5.1 人物专访：Krisztina Szűcs（下篇） ✔️
    • 3.6 本章小结 ✔️

《D3.js in Action》全新第三版封面

译者按
秉承“他山之石，可以攻玉”的创作理念，本章同前面两章一样，在章节末尾附上了一篇人物专访。本次接受访谈的数据可视化名家是一位来自匈牙利的著名平面设计师 克里斯蒂娜·苏茨，她以其在设计和数据可视化方面的独特视角和创新方法闻名于世。接下来就放松放松，看看她在学习 D3 的时候都踩过哪些坑，又有什么样的经验之谈给到大家——

3.5.1 人物专访：克里斯蒂娜·苏茨（Krisztina Szűcs）

---

苏茨（Szűcs） 是数据可视化领域的知名设计师 ¹。

【问】能否介绍一下您的背景，以及您是如何发现 D3.js 的？

【Szűcs】 好的。我并没有编程相关的背景，我拿的是平面设计的硕士学位，只是在 Flash 盛行的时代接触过一些 ActionScript。起初，我用的是 Processing ² 来进行数据可视化的创作；但当我在 2012 年上网时，发现几乎人人都在尝试这个叫 d3.js 的新鲜事物，并且它还非常适合做数据可视化，我这才决定试着去学习它的。

【问】那您是怎样学习 D3 的呢？其间都遇到过哪些主要困难，后来又是怎么克服它们的呢？

【Szűcs】 我对学习新的工具库或者语言其实并不很热衷，反倒更喜欢只学一门，然后一直用下去（哈哈）。当一个崭新的新事物闪亮登场时，我通常会很不高兴，因为它貌似成了业内的新标配，而我自己也再无法将它拒之门外，不得不投入时间和精力去学习了解它了。

因此，当 D3.js 出现时，每个人都开始谈论起它来。我那会儿也已经知道自己想要创建的，是具有交互效果的数据可视化作品，所以就做了个决定：学习 D3 是我当时必须得拿下的一件事，也是唯一的一件。

我记得这比我预想的要困难得多。我按照 Scott Murray 编写的教程《Web 交互式数据可视化》（Interactive Data Visualization for the Web） 进行学习，然后尝试将所学应用到自己的项目中。一开始按照教程的每一步来操作，这些知识都很有用；可当我最终尝试用自己的数据来应用这些示例时，却遭遇了失败——因为大多数情况下我的真实数据集都太复杂了，在让这些数据与 D3.js 有机结合的过程中，我着实遇到了不小的困难。

此外，我从一开始就想制作大型的、与众不同的视觉效果，而当时并没有专门的教程，所以一时也很难弄明白如何从简单的柱状图过渡到我脑海中那些非常规的复杂设计。我也只能反复练习与尝试，直到每个部分都和我想象中的效果一致才肯罢休。

【问】除了 D3 之外，您还用过其他可视化工具吗？在您当前的数据可视化工作流程中，D3 大概处在一个怎样的位置？

【Szűcs】 我用过像 Figma 这样的设计工具来设计我的可视化作品外观；同时还用过 Excel 和 Python，主要是进行一些数据集的处理或者收集方面的工作。

在使用设计工具时，我会抱着设计师的心态，先不去想那些在实际开发可视化作品时必须要面对的限制条件、或者不得不解决的所有难题。这有助于我避免限制自己的想法，从而构建出更好的视觉效果。当视觉效果以静态图片的形式呈现出来后，我就会切换到“开发者思维”，尝试重新创建我在设计稿中看到的一切。有时我会做一些调整，但当我设计的东西在开发时遭遇挑战，我会强迫自己先去解决代码方面的难题，而不是先给编程一路开绿灯，回头再把设计改成简单的东西。我还发现，对我来说这是学习 D3.js 的最佳方法。

【佳作赏析：动画版体坛赛事（详见：https://krisztinaszucs.com/）】

【图 1 国际泳联 2022 世锦赛男子 200 米仰泳比赛的动画演示截图】

【问】和我们说说您创作的这部作品（Animated Sport Results，动画版体坛赛事）吧。

【Szűcs】 我当时本来一直打算为 2020 年奥运会创作一部可视化作品。国际泳联 2022 年举办的这次世锦赛刚好就是个吸引了很多人关注的一项盛大国际体育赛事，并且里面的赛事数据资源也是现成的。我想，要是能创建一个与比赛相关的可视化作品，那么今后就可以在其他体育赛事（比如世锦赛）、甚至其他使用类似计分规则的体育项目中多次复用了。

我也希望观众能重温比赛的精彩，所以没有一开始就公布最终结果，而是慢慢地展示比赛的进程。

我很喜欢 Chartball.com ³ 网站和《纽约时报》上类似的可视化设计，它们都是我这部作品的灵感来源。

【问】您能再分享分享下面这部作品的创作过程吗？

【Szűcs】 刚开始着手这个项目时，我就明确了自己要创作的是一部动画版的作品，并且主打极简主义风格。作品中要带有一抹红色，这让我在脑海中联想到了日本（2020 年奥运会就是在东京举办的）。

【图 2 Krisztina Szűcs 为其作品《Animated Sport Results》准备的可视化设计草图】

【Szűcs】 然而我并不知道具体要为哪项体育赛事构建可视化项目，所以就依次为跳高、跳远、标枪、铁饼、跑步、室内自行车……等不同的体育项目绘制了许多草图，最后还为水球项目设计了一版和得分进度相关的可视化效果（即上图右下角那幅）。不久我就意识到，得分进度可视化将会是我复用频率最高的一个设计，一旦对外观感到满意，我就开始着手写代码了。

当然，当时离奥运会还有几个月，我还没拿到任何数据，所以用了上届奥运会的比赛成绩作为样本数据。此外，我还给自己创建了一个以可视化主体效果为中心的用户界面，以便在调色板或数据集之间快速切换。

我在奥运会开幕的前几周便做好了准备，刚好欧洲足球锦标赛也在那段时间举行。尽管我的可视化作品都是为进球数在十个以上的赛事设计的，但还是准备用足球比赛的结果来进行预演。我加载了足球比赛的数据文件，即使只有 1 ~ 3 个进球，可视化也能正常工作。其间我还做了些改进，引入了点球得分相关的可视化效果。

【图 3 根据 2021 年欧洲足球锦标赛的结果而尝试创作的得分情况可视化效果截图】

【Szűcs】 但奥运会开赛后，我无法拿到最新的比赛数据，因为数据都是以 PDF 格式发布在官方网站上的。这期间由于从 PDF 获取数据是一个相当繁琐的手动过程，这是我始料未及的，因此只成功制作并发布了两三个动画作品。这次经历也让我明白，应该去寻找更好的数据源进行创作。所幸其他赛事，比如世锦赛或体育协会的网站可以提供质量更好、也更易获取的数据源。在奥运会结束后，我拿到了更好的数据源，才创作出了更多这样的动画作品。

【问】您是用 D3 创作的这些动画，还是用了其他的什么库或者工具？

【Szűcs】 我只用了 D3.js，但为了导出图片，我还用了录屏软件 ScreenToGif 来录制屏幕。

【问】您的作品风格极具辨识度，它们是怎么逐步演变过来的呢？在数据可视化领域有没有什么诀窍可以树立像您的作品这样的影响力（your voice）呢？

【Szűcs】 我在大学期间学习的平面设计知识无疑为我打下了坚实的基础，但当下的平面设计趋势（印刷、品牌设计、包装设计、排版等等）也对我的设计风格产生了很大影响。每天我都会浏览平面设计相关的网站来不断捕捉灵感。每当发现非常喜欢的视觉元素或设计图案，我就会立即开始思考“这可能是个不错的可视化应用（dataviz）”。

当然，并不是所有的视觉趋势都可以用图表来表示；但我在努力弄清怎样借助 D3.js 来重塑某些特定而又不寻常的外观效果的过程中，收获了很多东西。

【问】您在学习 D3 和创建个人项目方面，有没有什么想与读者朋友们分享的技巧呢？

【Szűcs】 要注意将设计和编码阶段分开（Separate the design and the coding phase in your process）。先设计出最终的外观效果，与此同时要主动屏蔽那些让你觉得后续开发阶段实现起来会有多么困难的任何想法。这样，才能不断遇到需要解决的新问题，从而学到很多新技巧。

如果设计不是你的强项，作为日常练习也可以随时去搜寻一些优秀的可视化作品，然后试着从头开始重新创作一遍。

---

3.6 本章小结

• 在数据可视化中，我们主要处理两种数据类型：定量型数据和定性型数据。定量型数据是数字信息，如体重或温度；而定性数据通常是文本信息，如国家名称或电影类型。
• 作为 D3 开发人员，我们需要处理不同格式的数据集。最常见的是表格格式，如 CSV 文件和 JSON 文件中的 JavaScript 对象；此外，数据也可以按照不同层次、网络结构或者地理信息可视化的特定方式进行组织。
• D3 提供了将特定格式的数据集加载到项目中的工具函数。例如，d3.csv() 和 d3.json() 函数可分别加载 CSV 与 JSON 格式文件。在加载数据时，D3 会将其转换为对象数组。
• 加载外部数据集时，我们通常需要确保数据（尤其是数值型数据）格式正确。d3.csv() 和 d3.json() 的回调函数可以逐行访问数据集，是执行类型转换和其他数据操作的理想场所。
• 数据加载是一个异步过程，这意味着加载时浏览器会继续读取与执行脚本：
  • 在操作数据前，必须等待数据完成加载。为此，可以使用 JavaScript 期约接口中的 then() 方法；
  • then() 方法的回调函数可在加载结束后访问整个数据集。然后，可以在构建可视化效果前进一步测量和重构数据。
• 数据绑定模式产生的 SVG 元素数量与数据（单个数据点或者表格数据集中的行）数量相同：
  • 数据绑定模式由三个链式调用的方法组成：selectAll()、data()、join()；
  • 使用数据绑定模式生成 SVG 元素后，就能通过内联函数（译注：inline functions，即访问器函数 accessor）访问与每个元素绑定的数据项。
  • 绑定到元素上的数据也会传递给它的后代元素。
• D3 比例尺能将数据集中的值转换为用于指定 SVG 元素样式的各类属性值，如尺寸大小、位置及颜色：
  • 根据输入输出值是离散型还是连续型，可以将 D3 比例尺分为四个系列；
  • 线性比例尺从连续型定义域获取输入，并从连续型值域中返回一个输出值。其输出与输入值成正比。线性比例尺广泛应用于 D3 项目，例如计算条形图中矩形元素的长度；
  • 分段比例尺从离散型定义域中获取输入，并从连续型值域中返回一个输出值。这类比例尺对于在条形图的可用空间内排布各矩形元素特别好用。
• 对 SVG 分组元素进行平移（translation）将影响其内部所有的后代元素。
• 标签由 SVG 文本元素（text）构建。每个文本元素必须使用 x 和 y 属性单独定位；还可以使用 text-anchor 属性（attribute）设置文本右对齐。

---

1. 更多专访人物信息，可参阅 Krisztina Szűcs 的个人网站：https://krisztinaszucs.com/ ↩︎

2. Processing 是一个基于 Java 的开源编程语言和环境，旨在通过简化代码来帮助艺术家和设计师创造视觉艺术和交互作品。更多详情，详见 Processing 官方：https://processing.org/ ↩︎

3. Chartball 是一个专注于体育统计数据可视化的知名网站，提供直观的图表和分析工具，尤其是篮球和棒球相关的赛事数据。详见网站首页：https://www.chartball.com/ ↩︎