《D3.js数据可视化实战手册》——2.7 处理原始选集-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

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

简介:

本节书摘来异步社区《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>

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

743b25da6078f89c2fe7c1f8e3e599ce4753e25b

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章