本节书摘来异步社区《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
AI 代码解读
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>
AI 代码解读
本例生成的视觉效果如图所示。
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 这种方式通常并不必要，但是如果在特定情况下，例如在单元测试时，我们能够方便地知道每个元素的索引值和其引用，那么这一方式是非常有效的。我们在后面的章节将详细讲解单元测试。
