How Selections Work

2019-03-09  本文已影响0人  雷朝建

分组元素

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
console.log(d3.selectAll('h2').selectAll('p'));

则显示第三个元素为空数组:


6.PNG

数据绑定

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

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

考虑以下情况: 新建元素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();
上一篇 下一篇

猜你喜欢

热点阅读