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

Question

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

One nuance is that selections are grouped: rather than a one-dimensional array, each selection is an array of arrays of elements. This preserves the hierarchical structure of subselections

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

为什么它返回数组数组？

什么

This preserves the hierarchical structure of subselections

是什么意思？

提前致谢。

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 selection 将包含与 div 相同数量的元素它所基于的选择，并且每一个都将由在该元素中找到的元素选择组成。

所以在这种情况下， span将包含两个选择(第一个 <div> 和第二个 <div> )，每个将包含两个元素(第一个是 1 和 2，第二个是 3 和 4)。

至于 select , 同 selectAll除非它在找到匹配项后停止；然而，它的返回结构完全相同。

Demo