分组元素
- 当执行select/selectAll时候, 都会返回一个分组. 例如, 我们执行代码:
console.log(d3.select('body')._groups)
console.log(d3.selectAll('h2')._groups);
则展示:
4.PNG
当我们执行style/attr时候, 会对分组中的每个元素执行. 而select只会匹配第一个元素, selectAll会匹配所有的元素.
- 每个元素均由父元素. 在返回分组时候, 可通过父元素确定元素的具体位置.
假设我们执行操作:
const h = d3.selectAll('h2').append('p');
console.log(d3.selectAll('h2').selectAll('p'));
这里, 每个h2下面均由p. 如果我们d3.selectAll('h2').selectAll('p'), 则p会是一个分组, 但不在一个h2下, 而是在不同的h2下. 我们可以通过_parents属性查知.
5.PNG
- 空元素用于表明缺失的元素. 假设我们三个h2, 但是只有前两个h2存在p. 那么执行如下代码:
console.log(d3.selectAll('h2').selectAll('p'));
则显示第三个元素为空数组:
6.PNG
数据绑定
- 数据是DOM元素的属性, 而非选择器的属性. 数据可通过三种方式写入DOM属性中:
- 通过selection.data(插入分组)
- 通过selection.datum(单个元素)
- 通过append, insert, 或者select, 从父级中继承.
d3.select('body').datum(42);
console.log(document.body.__data__); // 42
// 通过父级继承
d3.select('body').datum(42).append('h1');
console.log(d3.select('h1')._groups[0][0].__data__);// 42
- selection.data函数定义的是分组的数据而非具体元素的数据.
key函数
-
使用selection.data时候, data和element的对应是默认通过索引的(数组的索引).
7.PNG - 如果数据是数组, 索引是高效的. 但是如果数据中的元素是字典, 则默认使用索引则是低效的. 这时候, 需要我们指定key函数.
const letters = [
{name: "A", frequency: .08167},
{name: "B", frequency: .01492},
{name: "C", frequency: .02780},
{name: "D", frequency: .04253},
{name: "E", frequency: .12702}
];
const div = d3.select('.chart');
div.selectAll('div').data(letters, d => d.name)
.enter().append('div')
.text(d => d.name);
Enter, Update和Exit
- 当插入数据情况下, 一般会有三种逻辑操作
- Update: 给定的数据中, 存在对应的DOM元素. (selection.data)
- Enter: 给定的数据中, 没有对应的DOM元素. (selection.enter)
- Exit: 给定的DOM元素中, 没有对应的数据. (selection.exit)
考虑以下情况: 新建元素abcde, 然后更新为yeaoi.
const div = d3.select('.chart');
div.selectAll('p').data(['a', 'b', 'c', 'd', 'e'])
.enter().append('p')
.text(d => d);
const newDiv = div.selectAll('p').data(['y', 'e', 'a', 'o', 'i'], d => d);
newDiv.enter().append('p')
.text(d => d);
newDiv.exit().remove();
- key函数d => d必须填写. 如果不填写, 则为新增p元素. 填写的情况下, 匹配之前的p元素.
- 使用enter新建DOM元素.
- 使用exit找出存在DOM元素, 但是数据不提供的(如b, c, d三元素), 然后删除它们.
