为什么我的 SVG 中的 .selectAll() D3 创建的圆圈使用 .length 说是 1 个元素？答案

【问题标题】：Why are the .selectAll() D3-created circles in my SVG said to be 1 element using .length?为什么我的 SVG 中的 .selectAll() D3 创建的圆圈使用 .length 说是 1 个元素？
【发布时间】：2016-01-30 11:34:21
【问题描述】：

我怀疑答案介于我对自己实际工作的对象类型的无知与 D3 和/或 SVG 的内在黑暗之间。

我可以在屏幕上看到 30 个圆圈。所以我像这样进入控制台。

var circles  = d3.select("#svg1").selectAll("circle");  
>undefined  

circles;  
>[Array[30]]...  

circles.length;  
>1

我知道我的目标是正确的元素，因为在集合上执行 .remove() 会将它们从屏幕上清除。但是计数是怎么回事？

【问题讨论】：

因为，circles 是一个包含单个元素的数组，它本身就是一个包含 30 个元素的数组。使用circles[0].length
@Tushar 对。知道了。正如我问 Fawzan - 在 D3 环境中总是这样吗？或者我们曾经有一个包含多个数组的数组？
您会获得多个顶级元素，例如用于嵌套选择。这是有据可查的——参见github.com/mbostock/d3/wiki/Selections“操作选择”部分。

标签： javascript d3.js svg

【解决方案1】：

var circles = d3.select("#svg1").selectAll("circle");

circles 是一个数组数组，因此长度为1。那是外部数组的长度。如果您想获得选定的圈数，则应使用d3s 内置方法size。

var count = d3.select("#svg1").selectAll("circle").size();

这将为您提供预期的结果。

【讨论】：

外部数组中是否存在不止一个数组（在 D3、数据等的上下文中）？如果是这样，size() 语句是否会给出所有内部数组中所有分量的总和？
根据 mikes 文档 select() 返回从当前文档中提取的元素数组。 size() 返回所选元素的数量。
那么，为了验证——外部数组中总是只有一个内部数组？关于尺寸 - 我不确定是“是”、“否”还是别的什么...... :)
我的错。对不起。 size() 不会给出 innerArray 的大小。如果您使用选择查询d3.select('blahblah')，它将给出一个数组（数组（1））。内部数组将在索引0 中有null。所以内部数组的长度是1，但大小肯定会为选择器返回0。
是的，我就是这么解释你的答案的，所以你说得对。长度是数组中元素的数量。大小是递归计算的子元素中的元素数。有道理。