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>