为什么d3的select()和selectAll()在这里表现不同? [英] Why are d3's select() and selectAll() behaving differently here?
问题描述
我正在玩拖动多个示例,我发现了一些我无法解释的内容。
I am playing around with the drag multiples example, and I noticed something I can't explain.
在此代码段中:
var svg = d3.select("body").selectAll("svg")
.data(d3.range(16).map(function() { return {x: width / 2, y: height / 2}; }))
.enter().append("svg")
.attr("width", width)
.attr("height", height);
我将 selectAll
更改为选择
。它仍然有效,但现在 svg
元素在 < / body>
>标签。带有 selectAll
的原始代码会按照您的预期在< body>
标记之后添加它们。
I changed selectAll
to select
. It still works, but now the svg
elements are added after the </body>
tag. The original code, with selectAll
, adds them after the <body>
tag as you would expect.
由于原始html不包含硬编码的< svg>
元素,我认为这两个选择
和 selectAll
只返回空选择。所以我无法弄清楚为什么会导致不同的行为。
Since the original html contains no hardcoded <svg>
element, I would think that both select
and selectAll
just return the empty selection. So I cannot figure out why they result in different behavior.
我只是在寻找解释。谢谢!
I'm just looking for an explanation. Thanks!
推荐答案
select和selectAll之间的基本区别在于select会压缩现有选择的层次结构,而selectAll会保留它。
The basic difference between select and selectAll is that select squashes the hierarchy of the existing selections, while selectAll preserves it.
因此,当你在另一个之后使用一个selectAll时,结果将很像嵌套的for循环列表。
Therefore, when you use one selectAll after the other, the result will be a lot like a list of nested for loops.
http://bost.ocks.org/mike/nest/
这篇关于为什么d3的select()和selectAll()在这里表现不同?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!