为什么 d3 的 select() 和 selectAll() 在这里表现不同？
[英]Why are d3's select() and selectAll() behaving differently here?
问题描述
我在玩拖动倍数的例子，我注意到一些我无法解释的东西。
在这个片段中：
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更改为select 。 它仍然有效，但现在的svg元素的后添加</body>标记。 如您所料，带有selectAll的原始代码将它们添加到<body>标记之后。
由于原始 html 不包含硬编码的<svg>元素，我认为select和selectAll返回空选择。 所以我无法弄清楚为什么它们会导致不同的行为。
我只是在寻找解释。 谢谢！
3 个解决方案
解决方案1
9 2015-02-07 22:36:16
select 和 selectAll 之间的基本区别在于，select 压缩了现有选择的层次结构，而 selectAll 保留了它。
因此，当您一个接一个地使用 selectAll 时，结果将很像嵌套的 for 循环列表。
解决方案2
5 2013-01-30 20:02:03
查看 Mike Bostock 的关于 select/selectAll: Nested Selections的帖子
去引用：
select 和 selectAll 之间有一个重要的区别：select 保留现有的分组，而 selectAll 创建一个新的分组。 因此，调用 select 会保留原始选择的数据、索引甚至父节点！
解决方案3
2 2018-12-02 14:01:57
这里的其他答案有点偏离，不要引用正确的来源； 这仅与嵌套有切线关系。 D3 的作者在他的连接概念中解释了它。 我在这里查看完整性：
你有两组（数组）：
- 驱动可视化的数据集；
- 表示该数据集中每个数据项的 HTML 元素。
在应用程序运行期间的任何给定时间，这些集合可能并不完全相同。 因此，我们进行了一些管理以确保它们始终匹配（每个处理帧）。 想象一个实时数据集（流）——也许上次我们只有 98 个元素，现在我们有 100 个。页面仍然有 98 个<div> ，但现在我们需要再创建 2 个。 这正是您的代码中自动发生的事情：
- 通过调用
.selectAll("svg")你是说，“创建一组<svg>元素，即使它们不存在。” 另一种说法是，“假设我们可以选择一组<svg>与我们提供的数据集相匹配。现在，继续创建该集合。” - ...这正是
.enter().append(...)然后所做的。 相反，如果我们的新数据集有太多元素（因为我们之前数据集中的元素比现在多）.exit().remove(...)会处理这个问题。
enter是我们需要创建的元素集； exit是我们需要删除的那些。
您的.selectAll("svg")不会返回任何内容，但由于它更像是一个建议而不是命令，因此它会在.enter().append("svg")中创建它需要的.enter().append("svg") ，以便匹配给定的数据集.
d3 selectAll.remove（）与d3.select.remove（）相比滞后
[英]d3 selectAll.remove() is lagging versus d3.select.remove()
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.