Question

我一直在使用示例"Using D3.js to present XML as HTML Table"来尝试学习 D3.js API。我想我已经掌握了它，但我无法理解.selectAll()的作用，the documentation对它的帮助不大。

如果你看一下例子，第17行：var td = tr.selectAll("td")。我也可以将其写为tr.selectAll("tr")，它将返回完全相同的表/页面。事实上，我可以写tr.selectAll("SomethingCompletelyRandom")但它仍然有效，但我无法删除.selectAll()。

这里发生了什么？ .selectAll()做了什么？它如何依赖选择器？

Answer 1

它选择所有<td>个节点作为父<tr>节点的子节点。 D3将此作为数组对象返回，即selectAll()将返回包含<td>个节点数组作为对象的数组，您可以在每个对象上调用其他d3函数。此外，了解幕后发生的事情的一个好方法是使用Chrome开发人员工具并在控制台中执行一些代码。

示例，假设您有此表：

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

如果您在控制台中运行d3.selectAll("td")，您获得的结果将是：

[Array[3]]  // A two dimensional array that contains 3 of the "td" nodes, each of of which is an object.
  >0: td       // A D3 selection object.
  >1: td
  >2: td
   length: 3
   parentNode: document
   __proto__: Array[0]

Answer 2

您指向的API链接是在之前的选择中使用selectAll（它是一个子选择），因此您可能没有意义（并且可能会令人困惑。）文档的相关部分要查看at here，更一般地说，是选择文档页面here的介绍。

同时使用td和tr的原因是初始选择在这两种情况下均不返回任何内容（因为您选择的地点tr已有还没有附加任何东西。）标准做法是选择你要创建的内容，因为将它扩展到动画并更新它变得非常重要。

我建议您查看Three Little Circles和Thinking with Joins教程

究竟是什么.selectAll（）呢？

2 个答案: