d3选择集合的操作方法一 select与selectAll

最新推荐文章于 2024-07-08 14:29:27 发布

阿拉里

最新推荐文章于 2024-07-08 14:29:27 发布

阅读量6.8k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_44884577/article/details/89278197

版权

本文介绍了D3.js中的select和selectAll方法，它们都返回选择集合，但select只选择第一个元素，selectAll则选择所有匹配的元素。在实际应用中，select难以建立父子关系，而selectAll更适用于批量操作。示例代码展示了如何使用这两个方法在DOM中选择和插入元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先给大家分享一个巨牛巨牛的人工智能教程，是我无意中发现的。教程不仅零基础，通俗易懂，而且非常风趣幽默，还时不时有内涵段子，像看小说一样，哈哈～我正在学习中，觉得太牛了，所以分享给大家！点这里可以跳转到教程

select与selectAll返回的结果都是d3的选择集合，并且都能进行集合运算，唯一不同的是集合的数量，select的数量恒小于等于1，并且总是返回第一个元素(如果存在的话)，最令人惊讶的是，select还难以建立集合的父子关系；而selectAll则是选择的所有元素。
假定文档中现有的dom元素如下所示：

<body>    <ul id="user-list">        <li class="list-group-item">0001        </li>        <li class="list-group-item">0002        </li>    </ul></body>
  
  1
2
3
4
5
6
7
8

测试的相关代码如下所示：

alert(d3.select('#user-list>li.list-group-item').size());   //  输出1alert(d3.selectAll('#user-list>li.list-group-item').size());    // 输出2//  假定数据集合的内容如下var datas = [{    name :　"yiifaa",    age  :  32}, {    name :　"yiifee",    age  :  29},  {    name :　"yiifoo",    age  :  29}];// 集合操作d3.select('#user-list')  .select('li.list-group-item')  .data(datas)    .enter()  // 因为现有的集合里只有一个元素，所以还能新增一个元素  .append('li')  .classed('list-group-item', true)  .text(function(d) {      return d.name;  });//  如果把上面的第二个选择语句换为selectAllvar addItems = d3.select('#user-list')                  .select('li.list-group-item')                  .data(datas)                    .enter();// 现有的集合与比较的集合都是两个元素，所以新增的元素为0  alert(addItems.size()); //  输出0                  
  
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

执行上面的代码后，输出的HTML节点如下所示，请仔细观察select新增元素的插入位置：

<body>    <ul id="user-list">        <li class="list-group-item">0001        </li>        <li class="list-group-item">0002        </li>    </ul></body><!-- 新插入的元素竟然会放置在这里，真是让人惊讶 --><li class="list-group-item">yiifee</li>
  
  1
2
3
4
5
6
7
8
9
10