为什么d3的select()和selectAll()在这里表现不同? [英] Why are d3's select() and selectAll() behaving differently here?

查看:689
本文介绍了为什么d3的select()和selectAll()在这里表现不同?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在玩拖动多个示例,我发现了一些我无法解释的内容。

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆