d3的全称是数据驱动文档,核心是将DOM文档的操作转换为对数据集合的操作,把开发人员的聚焦从DOM文档转移到数据集合上,大大简化了DOM文档与数据集合之间的联动操作,所以理解d3的集合操作就是学习d3的关键。
假定原有的集合与待运算的集合分别为A、B,d3的集合操作结果共有三种,待更新的集合(也就是共有的集合,A∩B)、独有的集合(A-B)以及新增的集合(B-A),对应的方法分别是data、exit以及enter,它们的示意图如下。
简单的记忆方法就是那串红色的字母,拼出来就是血,d3真是血淋林的集合操作啊。
假定文档中已存在的元素如下:
<ul id="list-group">
<li>0</li>
<li>3</li>
<li>5</li>
</ul>
待操作的集合为[1,2,3,4,5],示例代码及操作结果如下:
// 待运算的集合
var bSet = [1,2,3,4,5];
// 集合的唯一性识别
var iden = function(d) {
// 如果元素没有绑定过数据,数据就是其文字内容
return d ? d : parseInt(this.textContent); // 为了方便比较,这里对其类型进行了转换parse,也可以不转换
};
// 共有的集合,即A∩B,返回的结果为[3,5]
var update = d3.select('#list-group').selectAll('li')
.data(bSet, iden);
// 进行exit操作,即A-B,返回的结果为[0]
var itemsOfAOnly = update.exit();
// 进行enter,即B-A,返回的结果为[1, 2, 4]
var newItems = update.enter();