Nested Selections

内嵌的元素

考虑以下DOM结构:

<table>
  <thead>
    <tr><td>  A</td><td>  B</td><td>  C</td><td>  D</td></tr>
  </thead>
  <tbody>
    <tr><td>  0</td><td>  1</td><td>  2</td><td>  3</td></tr>
    <tr><td>  4</td><td>  5</td><td>  6</td><td>  7</td></tr>
    <tr><td>  8</td><td>  9</td><td> 10</td><td> 11</td></tr>
    <tr><td> 12</td><td> 13</td><td> 14</td><td> 15</td></tr>
  </tbody>
</table>

• 不同的父级结构(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