5

我一直在玩“使用 D3.js 将 XML 呈现为 HTML 表”示例，以尝试学习D3.js API。我想我已经掌握了它，但我无法真正理解它的.selectAll()作用，而且它的文档也不是很有帮助。

如果您查看示例，第 17 行：var td = tr.selectAll("td")。我也可以这样写tr.selectAll("tr")，它会返回完全相同的表格/页面。事实上我可以写tr.selectAll("SomethingCompletelyRandom")，它仍然可以工作，但我不能删除.selectAll().

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

4

2 回答 2

4

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

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

我建议您查看三个小圆圈和使用连接进行思考的教程

于 2013-03-06T23:04:56.237 回答
3

它选择<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]
于 2013-03-06T23:03:35.957 回答