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

最新推荐文章于 2024-07-18 10:23:58 发布

蚁方阵

最新推荐文章于 2024-07-18 10:23:58 发布

阅读量1.5w

点赞数 2

分类专栏： d3应用专题文章标签： d3应用专题

本文链接：https://blog.csdn.net/yiifaa/article/details/52108807

版权

d3应用专题专栏收录该内容

19 篇文章 9 订阅

订阅专栏

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>

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

alert(d3.select('#user-list>li.list-group-item').size());   //  输出1
alert(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;
  });
//  如果把上面的第二个选择语句换为selectAll
var addItems = d3.select('#user-list')
                  .select('li.list-group-item')
                  .data(datas)  
                  .enter();
// 现有的集合与比较的集合都是两个元素，所以新增的元素为0  
alert(addItems.size()); //  输出0

执行上面的代码后，输出的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>