13

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

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

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

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

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

意思是？

提前致谢。

4

1 回答 1

5

您不需要知道或关心对象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然而，它的回报结构完全相同。

演示

于 2013-05-22T21:06:25.027 回答