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)
    })
 });

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

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