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>