Nested Selections

内嵌的元素

考虑以下DOM结构:

  

    
  A
  B
  C
  D
  
  

    
  0
  1
  2
  3
    
  4
  5
  6
  7
    
  8
  9
 10
 11
    
 12
 13
 14
 15
  

• 不同的父级结构(html和tbody):

console.log(d3.selectAll('tbody td'));
console.log(d3.select('tbody').selectAll('td'));

8.PNG

数据实现内嵌结构

• 假设tbody是空的, 我们需要数据驱动, 动态生成table:

const data = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12],
  [13, 14, 15, 16],
];
d3.select('tbody').selectAll('tr').data(data).enter().append('tr')
  .selectAll('td').data(d => d).enter().append('td').text(d => d);

9.PNG

10.PNG

内嵌和父级元素

d3.selectAll("table tr")
    .data(matrix)
  .enter().append("tr"); // error!

这里之所以是失败的, 因为tr的父级节点是html, 而非table.

1.PNG

如果父级节点是table, 则会成功:

d3.select("table").selectAll("tr")
    .data(matrix)
  .enter().append("tr"); // success

2.PNG