.selectAll（）究竟做了什么？

问题描述：

我一直玩弄"Using D3.js to present XML as HTML Table"的例子，试图学习D3.js API。我想我已经掌握了它，但我无法真正理解.selectAll()的作用，而the documentation对此不是很有帮助。.selectAll（）究竟做了什么？

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

这是怎么回事？ .selectAll()是做什么的？它如何取决于选择器？

D3 “选择” 参考：（1）http://bost.ocks.org/mike/nest/，（2）HTTP：// WWW。 jeromecukier.net/blog/2013/03/05/d3-tutorial-at-strata-redux/，（3）http://www.dashingd3js.com/binding-data-to-dom-elements，（4）http ：//bost.ocks.org/mike/join/。 – mg1075 2013-03-08 01:47:10

答

您指向API链接是使用全选在以前的选择（这是一个子选择），所以它可能是没有意义的，你看（可能会令人困惑。）文件的相关部分看看将是here，更一般地说，介绍那个选择文件页面，here。

同时使用td和tr将在这里工作是最初选择在这两种情况下，没有返回值（因为你是从，tr选择的地方，有没有什么附加到它。）的原因，它是标准的做法选择您将要创建的内容，因为将其扩展为动画并更新时，它变得非常重要。

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

答

它选择所有<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]

.selectAll（）究竟做了什么？

相关推荐