【D3.js in Action 3 精译_023】3.3 使用 D3 将数据绑定到 DOM 元素

当前内容所在位置：

• 第一部分 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 项目中是如何处理数据值与视觉属性之间的对应关系的。