D3-selection总结

什么是D3.selections?

D3的selection概念其实很简单, 就是一组元素节点. 具体代码表达就是d3.selectAll('div'), 所有选中的div就是selection,有的翻译叫它选择集, 然后基于这个selection就可以做各种操作.

D3-selection

在selection上我们可以做到操作有:

设置属性attribute
设置样式
设置属性property
修改HTML或text内容
等等…

在绑定数据后返回的新selection上使用data join的enter,exit, append,remove, 我们可以增删改数据对应的元素.
selection的方法返回一般是当前selection的副本, 或者一个新的selection, 这样能使用链式方法的形式给选中的selection做相应的处理.
selection是不可变的immutable, 但是元素是可变的.

D3-join 方法

selection.data([data[,key]]): 将指定的数据和选中的元素进行绑定, 返回一个新的selection. data可以是任意值(数字或对象)的数组, 或者是一个返回一组矩阵的函数. 当一个数据绑定到元素时, 数据将会绑定在元素的__data__property, 这样再次select的时候,数据仍旧保持绑定.

data数据是会被分配给selection的每个组, 如果selection有多个组(如d3.selectAll…selectAll), 那么data参数应该以函数的形式指定. 如下图所示一个selection对象_groups数组中有多个对象.

data方法中含有一个key参数可以用来指定data中的数据按什么方式绑定到元素, 默认不加参数采用按索引位置顺序一一绑定.一个例子:

<div id="Ford"></div>
<div id="Jarrah"></div>
<div id="Kwon"></div>
<div id="Locke"></div>
<div id="Reyes"></div>
<div id="Shephard"></div>

var data = [
    { name: 'Locke', number:14 },
    { name: 'Ford', number: 53 },
    { name: 'Kwon', number: 3 },
    { name: 'Shephard', number: 38 },
    { name: 'Reyes', number: 18 },
    { name: 'Jarrah', number: 88 }
]

d3.selectAll("div")
    .data(data, function (d) {
        return d ? d.name : this.id
    })
    .text(function (d) {
        return d.number;
    });

上面这个例子达到的效果是让每个元素的text按div的#id和data映射的关系来展示展示数字.结果如下:

update和enter的selections以数据的顺序返回, 而exitselection保留原来的selection顺序.
如果data方法不传入参数, 方法返回选中元素的数据数组.

selection.join(enter[,update][,exit]): 给绑定的数据做对应的增加/移除/排序元素操作, 返回合并的enter/updateselection. 想要更加颗粒度地控制join中的是三个操作, 可以显式地传入enter, update, exit方法来控制元素:
1
2
3
4
5
6
7
svg.selectAll("circle")
.data(data)
.join(
enter => enter.append("circle").attr("fill", "green"),
update => update.attr("fill", "blue")
)
.attr("stroke", "black");
selection.enter(): 返回enter selection. 什么是enter selection呢? 其实就是数据多于元素的情况下, 需要预留位置新给元素.而这个预留的palceholder就是返回值. 在使用data()函数后, 当前selection对象会增加_enter和_exit属性,

如上图所示, 绑定数据后,_enter的值是EnterNode数组, 这时候使用enter()就会进入_enter属性(就是返回enter selection了), 把还没有找到DOM的数据找出来调用append()生成最终需要生成的DOM.如下图所示, 调用append后,最终要多余生成的rect就生成了.
selection.exit(): 返回exitselection, 就是返回那些没有数据可以再绑定的元素.
selection.datum([value]): 读取或设置选中的selection的__data__.
1
d3.selectAll('div').datum(33).text(d=>d) //所有的div渲染成33