How Selections Work

分组元素

• 当执行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三元素), 然后删除它们.