【D3.js in Action 3 精译_041】第4章人物专访：来自 Voilà: 公司的 Gagnon、Patricia 和 Olivia Gélinas + 4.5 本章小结-优快云博客

本文链接：https://blog.youkuaiyun.com/frgod/article/details/143957337

当前内容所在位置：

第四章直线、曲线与弧线的绘制 ✔️
4.1 坐标轴的创建（上篇）
4.1.1 D3 中的边距约定（中篇）
4.1.2 坐标轴的生成（中篇）
4.1.2.1 比例尺的声明（中篇）
4.1.2.2 坐标轴的添加（下篇）
4.1.2.3 轴标签的添加（下篇）

4.2 D3 折线图的绘制
4.2.1 直线生成工具的使用
4.2.2 对数据点作曲线插值处理

4.3 D3 面积图的绘制
4.3.1 面积图生成工具的用法
4.3.2 用标签提高图表的可读性

4.4 D3 弧形图的绘制
4.4.1 D3 中的极坐标系
4.4.2 圆弧生成器的使用
4.4.3 圆弧形心的计算
4.4.4 人物专访：Francis Gagnon、Patricia Angkiriwang 和 Olivia Gélinas ✔️

4.5 本章小结 ✔️

文章目录

- 4.4.4 本章人物专访：来自信息设计公司 *Voilà:* 的 Francis Gagnon、Patricia Angkiriwang 和 Olivia Gélinas
- 4.5 本章小结

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

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

译者按
本篇为第四章最后一部分内容，同时也是全新第3版的特色栏目——人物专访。通过与数据可视化领域不同背景的资深专家的交流，让读者身临其境感受当前数据可视化的最新前沿动态和行业趋势。其中不乏一些值得借鉴的参考意见。相信站在巨人的肩膀上，我们的 D3 学习之旅可以走得更加从容与稳健！

4.4.4 本章人物专访：来自信息设计公司 Voilà: 的 Francis Gagnon、Patricia Angkiriwang 和 Olivia Gélinas

Gagnon 是 Voilà: 公司的创始人，同时也是一名信息设计师。
Angkiriwang 是一名数据可视化设计师兼开发者。
Gélinas 是一名全栈开发，曾在 Voilà: 公司做程序员。

【问】能否谈谈 Voilà: 作为一家信息设计公司的使命愿景？

【Francis】 我们专注于可持续发展项目，即任何与环境保护、社会发展以及良好治理相关的项目。我们也将自己视为信息设计的倡导者。让世界变得更美好的倡议起初看起来可能很复杂，它们往往与强大的营销活动争夺注意力。我们希望帮助客户传递他们的重要理念，并产生最佳效果。

【问】D3.js 在您团队经常使用的数据可视化工具中扮演了什么样的角色？在您的工作流程（从头脑风暴到生产就绪项目）中又处于什么位置？

【Patricia】 我们的团队经常使用 Microsoft Excel 和 Adobe Illustrator 以及 RAWGraphs 等工具进行静态数据可视化的创作。在我们的交互式可视化工作流程中，D3.js 则是对 Svelte 的补充，通常用于原型设计、构建更多定制的可视化效果以及 Web 端的交互式内容。我们喜欢 D3 提供的实用工具（如 d3-array、d3-format 以及 d3-dsv 等），以及对我们的数据可视化至关重要的缩放工具（d3-scale）和插值工具（d3-interpolate）。如果我们最终要对任何圆弧形或堆积型数据进行编码，那么 d3-shape 工具模块是无论如何也绕不开的。

【问】根据你们的实践经验，尤其作为一个有很多人共同参与项目开发的团队，D3 的主要优缺点都有哪些？

【Patricia】 我认为 D3 的主要优点在于可以作为一种通用型语言，而且可以在网上找到很好的文档和示例。缺点则是即便如此，项目中的非编程人员也无法轻易玩转 D3。

【Olivia】 我想补充一点。与其他数据可视化工具相比，D3 具有充分的灵活性，这一点非常强大。它有助于创建您能想到的几乎所有可视化效果，并为许多更复杂的可视化图表（如桑基图（Sankey）、和弦图（chord diagrams））提供了便捷的工具函数。也正因为 D3 具备的高度灵活性，团队中的非编程人员很快就会意识到，我们似乎可以实现 “任何效果”，进而很快变为实现 “所有效果”；你很难向非编程人员清晰准确地表达某些任务的实现需要相当长的时间。因此，我们面临的挑战有时会更多偏向需求和边界管理层面，而不仅仅是纯技术问题。

【Patricia】 D3 的命令式风格也会让代码读起来很头疼，尤其是在团队成员之间交换代码时。在我们首次构建这个特定项目时，我们的代码使用 D3.js 来处理所有问题，包括 SVG 元素的控制以及交互逻辑的处理；当我将该项目切换到新的工作流时，就需要跟踪所有通过 d3-select 模块实现的事件处理逻辑，进而实现对项目中各功能点的总体把控，整个过程感觉就像在拼凑一个毫无头绪的谜语！

精品项目展示：面向可持续未来的包容性业务组合 （线上版详见：https://chezvoila.com/project/findevportfolio/）。

【图 1：通过冲积图直观展示国际发展项目互动组合（为 FinDev Canada 定制开发）】

【问】可以再介绍一下你们为 FinDev Canada 定制开发的这个可视化项目吗？

【Francis】 这是一个国际发展项目的互动组合。FinDev Canada 是一个支持新兴市场企业成长和可持续发展的组织。他们要求我们建立一个可视化项目，既能让公众了解当前正在进行的项目性质，又能作为员工仪表板使用。这个项目的核心是冲积图（alluvial graph），它是一种可视化图形，可用于呈现同一要素的不同分布。在本例中，该要素是项目的财务价值（或数量），分别按地区、投资类型、行业和 2X 资格进行分布。只要将光标悬停在图表上，每个项目的运作情况都能显示出来，并通过冲积图中的每一列，展示出不同类别的项目所占的比例分布情况。

【问】能再谈谈这个可视化项目的创建过程吗？

【Francis】 没问题。在这个项目中，我们的切入点是客户提供的一张包含数据和图表的 PowerPoint 幻灯片。乍一看，这些数据和图表似乎毫无关联。然后我们意识到，其中许多类别实际上是对相同数据的重组。因此，我们希望设计出一种能够澄清这种连续性的设计图，从而传达出数据的本质。通过线上的白板练习，我们的团队尝试并验证了许多可视化的早期想法，最终确定使用冲积图。之后我们又在 PowerPoint 中同步模拟了一个设计图版本，从视觉设计到动画实现完整复刻。最终我们向客户展示的第一版设计作品比我们现在实现的版本更为精致，这么做风险的确不小，但最终付出也得到了回报。

【Olivia】 一旦详细的模拟图获得批准，就只剩下图形的具体实现了。我先在纸上提前规划了后期会用到的主要文件、类和函数。然后从头到尾用代码实现一遍：首先定义类，然后是函数，最后填充所有内容。我采用迭代开发的工作方式，每隔一段时间就与团队确认一次，并在其间进行必要的调整。从那时起，迭代工作就一直在进行，因为代码每隔一段时间就会根据新数据和其他改进进行更新。

【问】这个冲积流程图是用 d3-sankey 模块创建的，还是您自己定制开发的解决方案呢？

【Patricia】 是的，我们确实使用了 d3-sankey 模块。我们用它来计算节点和链接的位置，以及链接路径的形状（当时我们用到了 sankeyLinkHorizontal() 函数）。为了方便定制，我们创建了自定义排序工具来确定节点和链接的顺序。然后，剩下的工作便是设计冲积层的样式、响应式尺寸大小的管理以及交互逻辑的实现等等。

【问】你们的可视化解决方案非常简单，但却非常高效和优雅。众所周知构建响应式的数据可视化作品极具挑战性，当初这个方案是反复试错的结果，还是直截了当的决定？

【Francis】 不得不说这里面有运气的成分。我们在后期才回想起来，客户希望有个移动版本，而这也是我们的首次尝试！我们盯着它看了一分钟，解决方案就出现在我们眼前：只需将它旋转 90 度即可。我们的测试立即得出结论，并告诉客户这就是我们一直以来的想法。为了让它在没有悬停动作的情况下也能在多点触控上正常工作，我们还做了一些必要的调整。

【图 2 将冲积图旋转 90 度，就能简单而优雅地解决响应式的问题】

【问】就 D3 学习以及成为专业的 D3 开发者方面，您觉得还有哪些技巧可以与读者分享？

【Patricia】 我的建议是不要在 “精通D3” 这个问题上给自己太多压力。即便从专业视角使用 D3，我也只是勉强了解了这个工具库的冰山一角！我认为将 D3 视为一套实用工具箱是非常有帮助的，可以根据情况从中尽情挑选适合的工具。在 D3 的学习过程中，有意识地挑选一些相关模块，并将其应用于正在进行的项目中。就我个人而言，d3-scale 模块改变了我思考和处理可视化问题的方式。

4.5 本章小结

D3 中的外边距约定（margin convention）通过系统化与可复用的方式，为坐标轴、标签和图例等部件预留出足够空间。
按照边距约定，需要声明一个包含上、下、左、右四个外边距大小的 margin 对象。
绘制图表的一种实用做法，是将图表各个部件置于一个 SVG 分组元素内，并根据预留的外边距将其定位到 SVG 容器的绘图区，从而为图表设置一个新的坐标原点，以方便后续的绘制。
D3 提供了四个用于生成坐标轴的工具函数：axisTop()、axisRight()、axisBottom() 和 axisLeft()，可分别创建顶部、右侧、底部及左侧坐标轴组件（components）。
这些坐标轴生成器以 D3 比例尺函数为参数，并返回一组构成对应坐标轴的 SVG 元素（包含一条坐标轴线、多组刻度及刻度标签等）。
而坐标轴的最终绘制是通过在 D3 选择集上链式调用 call() 方法、并将上述坐标轴元素作为参数传入该方法实现的。
折线图（Line chart）是 D3 中最常见的一类图表，可用于揭示某观测指标随时间的演变规律。本章通过 D3 的直线与拟合曲线来连接各个数据点，详细演示了 D3 折线图的绘制方法：
- 首先通过方法 d3.line() 初始化一个折线生成器。它有两个访问器函数：x() 和 y()，分别用于计算每个数据点的水平及垂直方位。
- 利用折线生成器的另一个访问器函数 curve() 还能将折线图转换为曲线图。D3 内置了多种曲线插值函数，由于这些函数会影响最终的数据呈现，使用时务须谨慎。
- 要让折线图渲染到页面上，需要向 D3 选择集添加一个 path 元素，其 d 属性则通过折线生成器设置，并将数据集作为参数传入生成器函数。
面积图其实是由两条边界线之间的区域构成的。D3 面积图的绘制方法与折线图类似：
- 首先，利用 d3.area() 方法声明一个生成面积的工具函数。该函数至少需要三个访问器函数来确定面积图边缘各数据点的方位，即 x()、y0()、y1()，或者 x0()、x1()、y()。
- 与折线图一样，D3 面积图也提供了对应的插值函数，可通过面积生成器的 curve() 函数进行设置。
- 要将面积图绘制到页面，同样需要在选择集插入一个 path 元素，其 d 属性也是通过面积生成器函数算得，参数同样为该图表的数据集。
文本标签可以极大地提高可视化项目的可读性。D3 中的文本标签不过是一系列 text 元素，只是需要在 SVG 容器中进行定位：
- 文本位置坐标通过 x 和 y 属性设置；
- 其中 y 属性（attribute）值是相对于 text 文本基准线的偏移量，该基准线的默认位置在文本底边，可通过 dominant-baseline 属性进行变更：值为 middle 时基准线位于文本中线位置；值为 hanging 时则位于文本顶部。
D3 中的圆弧是由极坐标进行描述的。在极坐标系定义的平面空间中，任意一点的方位均可通过半径（即该点到极坐标原点的直线距离）以及该点对应的方位角进行描述。
D3 中的圆弧也是通过 SVG 的 path 元素创建的，其 d 属性的值也是通过圆弧生成器算得的：
- D3 的圆弧生成器函数（即 d3.arc()）提供了一个访问器函数，用于定义圆弧的起始角和终止角（即 startAngle() 和 endAngle()）以及圆弧轨迹的内圆半径与外圆半径（即 innerRadius() 和 outerRadius()）。
- 此外还可以使用访问器函数 cornerRadius() 来对圆弧轨迹线的拐角作圆角化处理，或者通过 padAngle() 方法在不同的圆弧之间设置间隔。
- 圆弧生成器中的各参数值使用的是弧度制计量。
圆弧的形心坐标可通过圆弧生成器上的访问器函数 centroid() 计算得到。该函数返回该圆弧形心的坐标数组，分别对应其水平及垂直方位。

另附：专栏文章连载期间 完全免费，后续 不排除 调整为收费专栏。对 D3.js 感兴趣、或者想要从零开始彻底掌握 D3 的朋友们强烈建议及时关注本专栏，一起学习交流，共同进步！

目前译好的其他章节内容如下（可进入专栏查看详情）：

第一部分 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 本章小结