为什么d3.select()返回数组数组？

Question

我最近开始使用d3.js编写一些脚本来操作SVG.所以大多数时候我都会参考d3文档并找到解决方案.但是我无法理解为什么d3.select函数返回数组的数组.例如,假设我有一个SVG元素,如果我这样做d3.select("svg"),它会返回,[[svg]]所以我必须这样做d3.select("svg")[0].文件说

一个细微差别是选择被分组:而不是一维数组,每个选择是元素数组的数组.这保留了子选择的层次结构

然后说我们大多数时候都可以忽略它.

1. 为什么它会返回数组？
2. 是什么

这保留了子选择的层次结构

意思？

提前致谢.

Answer 1

您不应该知道或关心对象d3.select返回的内部结构.您需要知道的是该对象可以访问哪些方法,这是文档描述的内容.

说你有这个文件:

<div>
    <span>1</span>
    <span>2</span>
</div>
<div>
    <span>3</span>
    <span>4</span>
</div>

如果选择所有<div>元素d3.selectAll

var div = d3.selectAll("div");

的div是大小为2,一个的每一个的D3选择对象<div>的文档中的元素.

但是,如果您现在从此选择对象生成子选择

var span = div.selectAll("span");

搜索div选择中每个元素内的匹配元素,并保留结构 - 即,span选择将包含与div其所基于的选择相同数量的元素,并且每个元素将包括选择的在该元素中找到的元素.

因此在这种情况下,span将包含两个选项(第一个<div>和第二个<div>),每个选项将包含两个元素(第一个中的1和2,第二个中的3和4).

至于select,selectAll除了在找到一场比赛后停止之外,它是相同的; 然而,它的回归结构完全相同.

演示