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元素的数据，依赖于设定的值,本例中返回1
var 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;
   })