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

    相关资源:敏捷开发V1.0.pptx
    最新回复(0)