d3选择集合的操作方法 二 each与call

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

                    

      each与call都能对d3选择的集合进行操作，不同的是，each不仅能对单个元素依次进行操作，并具有所选择dom元素的上下文，而call只能整个集合进行操作，要想获得所选择元素的上下文，只能继续调用each方法，示例代码如下：

//  假定数据如下所示var datas = [{    name :　"yiifaa",    age  :  32}, {    name :　"yiifee",    age  :  29}];//  新增元素节点d3.select('body')    //  建立集合的父子关系 .selectAll('div.list-group-item') .data(datas) .enter() .append('div') // 回调函数的参数为选择的集合 .call(function (sel) {    //  此处的上下文指向window，即this === window    //  为所有的元素添加样式    sel.classed('list-group-item', true);    //  可以继续调用each方法    //  此处的参数为数据内容    sel.each(function(d) {        //  此处的上下文指向相关的dom元素        this.textContent = d.name;        d3.select(this).attr('age', d.age);        //  d3.select(this).text(d.name)    }) });
  
  
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

      最后生成的元素节点如下:

<div class="list-group-item" age="32">yiifaa</div><div class="list-group-item" age="29">yiifee</div>
  
  
1
2

           

浏览人工智能教程