《D3.js数据可视化实战手册》——2.7 处理原始选集

xiaoxiao2024-03-11 132

本节书摘来异步社区《D3.js数据可视化实战手册》一书中的第2章，第2.7节，作者：【加拿大】Nick Qi Zhu，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.7 处理原始选集

虽然不常使用，但某些时候，获取D3的原始选集数组对于开发是有利的，因为无论是为了调试，还是和其他JavaScript库集成，都可能需要原始的DOM元素。在本例中，我们将会对此进行展示。同时，我们也会观察D3选集对象的内部结构。

2.7.1 准备阶段

请在浏览器中打开如下文件的本地副本。

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter2/raw-selection.html

2.7.2 开始编程

当然，可以使用nth-child选择器，或者在each函数基础上使用选集迭代函数，但是有些情况下，这些方式过于累赘。这里我们提供一种更加便利的处理原始选集数组的方法。在本例中，可以看到对原始选集数组进行存取和处理的方法。

<table class="table"> <thead> <tr> <th>Time</th> <th>Type</th> <th>Amount</th> </tr> </thead> <tbody> <tr> <td>10:22</td> <td>Purchase</td> <td>$10.00</td> </tr> <tr> <td>12:12</td> <td>Purchase</td> <td>$12.50</td> </tr> <tr> <td>14:11</td> <td>Expense</td> <td>$9.70</td> </tr> </tbody> </table> <script type="text/javascript"> var rows = d3.selectAll("tr");// <-- A var headerElement = rows[0][0];// <-- B d3.select(headerElement).attr("class", "table-header");// <--C d3.select(rows[0][1]).attr("class", "table-row-odd"); //<-- D d3.select(rows[0][2]).attr("class", "table-row-even"); //<-- E d3.select(rows[0][3]).attr("class", "table-row-odd"); //<-- F </script>

本例生成的视觉效果如图所示。

2.7.3 工作原理

在本例中，我们遍历了一个页面上的HTML表格，并为之上色。事实上，这并非在D3下为表格的奇偶行上色的最好示例，但在这里，我们主要意在展示如何获取原始选集数组。

技巧.tif 一个更好的为表格奇偶行上色的方式是使用each函数，再根据不同的索引参数来处理。

在行A中，我们选取了所有的行并将选集结果存储在rows变量中。D3选集结果存在于一个JavaScript二维数组中。因此，可以使用rows0和rows0来分别获得第一和第二个选中元素。在行B中，表格的header元素可以通过rows0来获取，得到一个DOM元素对象。在前面章节中我们提到过，任何DOM元素都可以直接通过d3.select来选取，如行C所示。在行D、E、F中，我们展示了如何对选集中的每个元素进行直接索引和访问。

在某些情况下，很容易就能获得原始选集。但是，由于它需要直接访问D3选集中的数组数据，这就会使得代码对此产生结构性的依赖。换句话说，如果在未来的D3版本中，它改变了这一结构，那么依赖它的代码就会受到影响。因此，除非不得已，我们应该尽量避免操作原始选集。

技巧.tif 这种方式通常并不必要，但是如果在特定情况下，例如在单元测试时，我们能够方便地知道每个元素的索引值和其引用，那么这一方式是非常有效的。我们在后面的章节将详细讲解单元测试。