当前内容所在位置：

• 第一部分 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.5 加注图表标签
    • 3.6 本章小结

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

译者按
上一节我们学习了 D3 进行数据加载、格式化处理、必要的指标测量等具体方法，最后得到一个符合可视化项目需要的标准数据集（以对象数组的形式）。然后将该对象传入一个专门用于实现可视化效果的自定义函数 createViz 中。本节就来看看 createViz 是如何一步步实现我们想要演示的条形图的。

3.3 将数据绑定到 DOM 元素 Binding data to DOM elements

接下来学习 D3 最激动人心的一个核心知识点：数据绑定。数据绑定能将数据（即单个数据项）与 DOM 元素关联起来。例如我们的条形图示例，其中的每个 rect 元素，都与问卷结果中的某项技术的投票总数相关联。

图 3.15 D3 数据工作流第四步：创建可视化 DOM 元素并实现数据绑定

绑定数据需要按照以下代码的格式来书写。该写法由 选择集 链式调用的三个 D3 接口方法（selectAll()、data() 与 join()）构成。

selection.selectAll("selector").data(myData).join("element to add");

再结合我们的条形图示例分析一下这段代码。示例项目需要根据数据集中的每一行（也称为 datum，即数据项）创建一个矩形元素。数据绑定的这种写法，就是在告诉 D3 每一个矩形元素要与某个数据项一一对应。

回到 main.js 文件，在函数 createViz() 内部创建一个与页面 SVG 容器相对应的 D3 选择集，并赋给常量 svg。该选择集就是后续添加矩形元素的容器。接着链式调用 selectAll() 方法，并传入一个待新增的元素标签名，即 "rect"。selectAll() 方法可以接受任意 CSS 选择器作为参数，元素的标签名称往往是最常用的：

const createViz = (data) => {svg.selectAll("rect")
};

您也许好奇：怎么选了一组根本不存在的元素？这就是被业内称之为 空选择集（empty selection） 的概念。但此时 D3 还不知道需要添加多少个矩形元素，这就得再链式调用一个 data() 方法，并将上一节处理过的数据集（data）传进去。这样一来 D3 才会给数据集中的每一行创建一个 rect 元素：

svg.selectAll("rect").data(data)

最后，这些矩形元素通过 join() 方法正式进入 DOM 对象：

svg.selectAll("rect").data(data).join("rect")

保存项目，并在浏览器的调试工具中检查 DOM 结构。如图 3.16 所示，SVG 容器中此时包含 33 个矩形元素，每一个都对应数据集的中某项技术。

图 3.16 完成数据绑定并添加到页面 DOM 结构中的矩形元素截图

整个数据绑定的详细过程如图 3.17 所示。从选择集开始，这里就是 SVG 容器；然后调用 selectAll() 方法创建一个空选择集，传入我们的标签选择器；接着再调用 data() 方法；最后通过 D3 的 join() 方法给每个数据项添加一个对应的矩形元素。完成数据绑定的选择集实现了元素与数据的特定 组合（combination）。后续每当复用该选择集中的元素，或者对其执行某些 DOM 操作，都能直接访问到元素对应的数据。

图 3.17 数据绑定过程示意图

数据绑定的另一种写法

如果上网搜索 D3 的代码示例，想必会碰到下面这样的写法。这是 D3 数据绑定的另一种写法，与本节介绍的略有不同。其中链式调用的方法为 .enter().append()，而不是 join()：

selection.selectAll("selector").data(myData).enter().append("element type");

虽然使用 .enter().append() 仍然有效，但该写法从 D3 第 6 版开始，基本就被 join() 所替代了。在代码的底层实现中，join() 方法不仅能够根据数据处理这些有待添加到选择集中的元素，还进一步考虑了很多细节：会有多少新元素进入 DOM、有多少元素退出 DOM、以及有多少元素正在 DOM 中更新。这种更为复杂、更加精细化的模式设计，以其对可视化数据不断演变本质的准确把控，而在众多交互式可视化项目实践中脱颖而出、独占鳌头。此外，除了全面考虑数据绑定涉及的这些相关细节，join() 写起来也比之前的 .enter().append() 更简单。

本书将在第 7 章《交互式可视化》中详细介绍这种更精巧复杂的数据绑定模式。此刻您只需要知道，D3 的早期版本在绑定数据的写法上，和本节介绍的版本略有不同即可。这些历史版本的代码今后大概率可能还将继续发挥余热，被您碰到。

3.3.1 利用数据给 DOM 属性动态赋值 Setting DOM attributes dynamically with data

之前讲过，D3 会将加载的 CSV 文件转换成一个可迭代的对象数组结构。利用这个数据结构，就能将其中的每个对象绑定到对应的矩形元素上。这些被绑定的数据不仅控制着新增矩形元素的个数，还可以在执行元素操作时供访问器函数（accessor functions）及其他内置函数直接访问。

下面结合本章的条形图示例来进行演示。在刚才的数据绑定代码后面，再次链式调用一个 attr() 方法，目的是给每个矩形元素指定一个 class 属性（attribute）。但这里传入第二个参数的不是简单的属性值，而是一个访问器函数，如下列代码所示。

可以看到，这里的访问器函数与其他 JavaScript 函数没什么不同。它返回一个样式类的值，也就是代码中的 bar，或者任何需要赋给矩形元素的有效类名：

svg.selectAll("rect").data(data).join("rect").attr("class", d => {console.log(d);return `bar bar-${d.technology}`;})

该访问器函数接受一个参数 d，表示各矩形所绑定的数据项 datum。如果把 d 打印到控制台，就会看到包含一门技术及其总票数的每一个对象元素依次输出，就像直接在遍历这些矩形一样。

关于模板字面量与连接字符串

上面的代码片段（译注：即倒数第 2 行）使用了 模板字面量（template literals），也称为 模板字符串（template strings），用反引号（``）进行引用。它用于将传统的 JavaScript 字符串与表达式相结合。其中，表达式以一个美元符号 $ 开头，并用大括号包起来，如 ${表达式}：

模板字面量与连接字符串对比

将表达式与字符串组合在一起，您可能更容易想到连接字符串，虽然这种写法老套了点，但也没什么问题。如上图所示，在连接字符串中，字符串的两边使用了引号（""），而表达式的连接则用的是加号（+）。其实两种写法都可以，但模板字面量正在成为新主流。

绑定数据的这种访问机制，对于矩形位置和大小的设置而言十分有利。条形图最终要实现如图 3.18 所示的垂直堆叠效果：每个矩形宽（width 属性）表示选用该工具的从业者数量，对应绑定数据的 count 值；矩形越长，选用该技术的人就越多，反之亦然。另一方面，矩形的高（height 属性）则是固定的，并且在垂直方向上相互留有一定间隙。

图 3.18 找出每个矩形左上角位置的通用公式

若将柱形的高度值赋给常量 barHeight，则可以用下面的代码来设置矩形的宽高。注意属性 width 的设置，仔细观察回调函数的用法以及获取绑定数据的 count 值的实现过程：

const barHeight = 20;
svg.selectAll("rect").data(data).join("rect").attr("class", d => {console.log(d);return "bar";}).attr("width", d => d.count).attr("height", barHeight)

然后，矩形位置的设置则需要分别计算出其 x 属性和 y 属性的值。这里的 x 和 y 分别表示各矩形元素在 SVG 容器坐标系中左上角的坐标。如图 3.18 所示，矩形与 SVG 父容器的左边界对齐，也就是说其 x 属性始终为 0。

与此同时，y 属性的值则需要算一算了——
第 1 个矩形条的左上角位于 SVG 容器的顶部，此时 y 值为 0；
第 2 个矩形位于第 1 个的正下方，与上一个矩形的左上角相距一个单位的柱形高度，外加一部分间距（切记，SVG 元素的 y 坐标是向下为正）；
第 3 个矩形的位置还要低一些，其 y 坐标的值为两个柱形高度，外加两倍的垂直间距。
如图 3.18 所示，可以观察出 y 值满足的某种规律。任一矩形的 y 值，应该等于在它之前的矩形数，乘以条形高度与垂直间距的和。

这样，在 y 属性的回调函数中，需要用到第二个循环参数，通常命名为 i，表示 索引（index）。前面介绍过，使用访问器函数就像在循环遍历被绑元素的数据。在 JavaScript 的循环语法中，通常可以访问到每个当前元素的索引，即它们在循环数组中的位置再减 1（JavaScript 中的数组索引是从 0 开始的）。入一下代码片段所示，利用索引来计算每个矩形元素的垂直位置，并相互预留出 5px 的间隙：

const barHeight = 20;
svg.selectAll("rect").data(data).join("rect").attr("class", d => {console.log(d);return "bar";}).attr("width", d => d.count).attr("height", barHeight).attr("x", 0).attr("y", (d, i) => (barHeight + 5) * i)

上述代码在访问器函数中，使用了 JavaScript 的 箭头函数（arrow function） 语法（即 ECMAScript 6，也叫 ES6 语法）。当函数只用到一个参数时，比如设置第 6 行的 class 属性与第 10 行的 width 属性，则不需要小括号；而当参数存在多个时，则必须用小括号包起来（如最后一行用于设置 y 属性的 (d, i)）。另外，访问器函数如果存在多行语句，则函数体必须用大括号（{}）括起来，同时必须存在返回语句（如代码段第 6 行至第 9 行对 class 属性的设置）；而对于简单的单行函数，则无需大括号与返回语句（如第 10 行设置属性 width 的写法）。如图 3.19 所示，这些语法规则可以总结归纳如下：

图 3.19 箭头函数的用法示意图

保存并重新加载项目，会看到如图 3.20 所示的矩形顺次排列。终于看着有点像条形图了！

图 3.20 利用数据对各矩形进行定位并调整其大小后的渲染效果

提示

下一节将介绍分段比例尺（band scales）在计算条形元素垂直位置时的具体用法。但是像本节这样手动计算各矩形元素位置的做法也很有意义。开发 D3 项目时经常需要进行这样的元素定位计算，因此熟悉这类任务是很有必要的。刚开始接触可能不太轻松，但加以时日练习，就能彻底掌握其中的要领。应对这些计算的最佳方法之一，是将可视化中的其中几个元素画在一张纸上，然后找出它们在 SVG 父级坐标系中的位置坐标，如上图 3.18 所示。这项练习能帮助您更好地理解可视化项目的构建过程，尤其是处理复杂项目的时候。

接下来，需要设置矩形元素的 fill 属性来给上面的条形图上色，让画面看起来更美观。以下代码段使用了 CSS 内置的天蓝色 skyblue。当然也可以填充您喜欢的任意颜色：

svg.selectAll("rect").data(data).join("rect")....attr("fill", "skyblue");

最后，在检查一下绑定到矩形的数据，识别出 D3.js 对应的那个数据项。为此，需要用到 JavaScript 的三目运算符（ternary operator）：如果当前技术是 D3.js，则给 fill 属性填充黄绿色 "yellowgreen"；否则填充为天蓝色 "skyblue"，如图 3.21 所示。

  ....attr("fill", d => d.technology === "D3.js" ? "yellowgreen" : "skyblue");

图 3.21 给 D3.js 对应的条形元素填充绿色，其余则填充蓝色

这样，示例中的条形图就初步成型了。目前每个矩形的宽度都是直接用的数据本身的值，这种做法可能并不太实用。想象一下：要是数据中的数值是以百万为单位，难道也像这样对应到矩形宽度上吗？下一节将介绍比例尺相关的知识，看看它们在 D3 项目中是如何处理数据值与视觉属性之间的对应关系的。