d3选择集合核心方法(二)：data与datum

表一 d3赋值语句data与datum的区别

特性 datum data 集合运算 不支持 支持enter、exit函数 唯一性识别 不支持 不支持 旧数据清除 支持 不支持 读取数据 返回集合的第一条数据 返回集合的所有数据 赋值 将集合的每个元素设置为同样的值 集合更新运算，两个集合的交集运算 链式操作 后值总是覆盖前值 不断进行集合的交集运算 对空元素赋值 后续操作无效果 可通过enter添加新元素

实例代码：

假定预置的DOM元素如下：

<li class="list-group-item" id="1"></li><li class="list-group-item" id="2"></li><li class="list-group-item" id="3"></li>

1. 集合运算

//  进行交集运算, update.data()运算结果为[1, 2, 3]var update = d3.selectAll('.list-group-item').data([1, 2, 3])//  进行赋值运算,所有的.list-group-item元素的数据都为[1, 2, 3]var items = d3.selectAll('.list-group-item').data([1, 2, 3])

2. 唯一性识别

//  可添加主键的唯一性识别，排除重复元素, update.data()运算结果为[1, 2, 3]var update = d3.selectAll('.list-group-item').data([1, 2, 3], function(d) {    return d !== undefined?d : this.id;})

3. 清除旧数据

//  无效，始终会进行集合运算，并且参数只接受数组类型var update = d3.select('#list-group-item').data({id : '1', name : "item"})  //  有效，会将#list-group-item的数据更新为{id : '1', name : "item"}var update = d3.select('#list-group-item').datum({id : '1', name : "item"}) 

4. 读取数据

//  返回所有.list-group-item元素的数据，类型必定是数组,本例中为[1, 2, 3]var values = d3.selectAll('.list-group-item').data()    //  返回的总是第一个.list-group-item元素的数据，依赖于设定的值,本例中返回1var value = d3.selectAll('.list-group-item').datum()

5. 赋值

参见清除旧数据与唯一性识别。

5. 链式操作

//  声明唯一性识别函数var identify = function(d) {    return d !== undefined ? d : this.id;}//  不断进行集合运算,假定有上面的预置DOM，返回的结果为[2, 3]var joins = d3.selectAll('.list-group-item').data([1, 2, 3], identify).data([2, 3, 4], identify)    //  所有.list-group-item元素的数据都为[2, 3, 4]var update = d3.selectAll('.list-group-item').datum([1, 2, 3], identify).datum([2, 3, 4], identify) 

6. 空元素操作

假定页面中不存在header元素。

//  不会添加任何元素d3.select('header').datum({name : 'yiifaa'}).append('header').text(function (d) {    return d.name;})//  会添加元素 d3.select('header').data([{name : 'yiifaa'}]) //  务必确认赋值一定是数组   .enter().append('header').text(function (d) {            return d.name;   })