Question

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

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

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

为什么返回数组数组？
什么

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

意思？

提前致谢。

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选择将包含与{{1}相同数量的元素它基于的选择，并且每个选择都包含在该元素中找到的元素的选择。

因此，在这种情况下，div将包含两个选项（第一个span和第二个<div>），每个选项将包含两个元素（第一个中的1和2，3和第二节中的4节。

至于<div>，它与select相同，只是在找到一个匹配后停止;然而，它的回归结构完全相同。

Demo

为什么d3.select（）返回数组数组？

1 个答案: