选择 null：D3 中 selectAll(null) 背后的原因是啥？
Posted
技术标签:
【中文标题】选择 null：D3 中 selectAll(null) 背后的原因是啥？【英文标题】：Selecting null: what is the reason behind selectAll(null) in D3?选择 null：D3 中 selectAll(null) 背后的原因是什么？ 【发布时间】：2018-02-19 04:41:26 【问题描述】：我已经看到一些 D3 代码使用这样的模式来附加元素：
var circles = svg.selectAll(null)
.data(data)
.enter()
.append("circle");
我真的不明白这个sn-p。为什么选择null？
我理解D3的方式，如果是附加圆圈，应该是：
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
同样的方法，如果要附加 html 段落，它应该是：
var circles = svg.selectAll("p")
.data(data)
.enter()
.append("p");
对于类也是如此：如果添加带有 foo 类的元素，它应该是 selectAll(".foo")。
但是，selectAll(null) 确实有效！元素被附加。
那么，null 是什么意思？我在这里错过了什么？
注意：这是一个自我回答的问题，trying to provide a "canonical" Q&A on a subject that has been touched on by many previous questions，API 没有解释。下面的大部分答案来自我在绝种*** Documentation中写的一个例子。
【问题讨论】：
【参考方案1】：tl;博士
使用selectAll(null) 的目的是保证“输入”选择始终对应于数据数组中的元素，数据中的每个元素对应一个元素。
“进入”选择
为了回答您的问题，我们必须简要解释一下 D3.js 中的“输入”选择是什么。您可能知道，D3 的主要功能之一是binding data 对 DOM 元素的能力。
在 D3.js 中，当将数据绑定到 DOM 元素时，可能出现三种情况：
-
元素个数和数据点个数相同；
元素多于数据点；
数据点多于元素；
在情况 #3 中，所有没有对应 DOM 元素的数据点都属于“输入”选择。
因此，在 D3.js 中，“输入”选择是在将元素连接到数据后，包含与任何 DOM 元素不匹配的所有数据的选择。如果我们在“输入”选择中使用附加函数，D3 将创建新元素，为我们绑定该数据。
这是一个维恩图，解释了有关数据点数量/DOM 元素数量的可能情况：
将数据绑定到现有的 DOM 元素
让我们打破你提议的附加圈子的 sn-p。
这...
var circles = svg.selectAll("circle")
.data(data)
... 将数据绑定到包含所有圆圈的选择。在 D3 术语中，这就是“更新”选择。
那么，这个……
.enter()
.append("circle");
... 表示“输入”选择，为每个与所选元素不匹配的数据点创建一个圆圈。
Sure, when there is no element (or a given class) in the selection, using that element (or that class) in the selectAll method will work as intended.因此，在您的 sn-p 中，如果 svg 选择中没有 <circle> 元素，则可以使用 selectAll("circle") 为数据数组中的每个数据点附加一个圆圈。
这是一个简单的例子。 <body> 中没有 <p>，我们的“输入”选择将包含数据数组中的所有元素：
var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll("p")
.data(data)
.enter()
.append("p")
.text(d=> "I am a " + d + " paragraph!")
.style("color", String)<script src="https://d3js.org/d3.v4.min.js"></script>但是如果我们在该页面中已经有一个段落会发生什么？让我们看看：
var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll("p")
.data(data)
.enter()
.append("p")
.text(d=> "I am a " + d + " paragraph!")
.style("color", String)<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Look Ma, I'm a paragraph!</p>结果一目了然：红色段落消失了！它在哪里？
第一个数据元素“red”绑定到已经存在的段落。然后，只创建了两个段落（我们的“输入”选择），蓝色的和绿色的。
发生这种情况是因为，当我们使用 selectAll("p") 时，我们选择了，嗯，<p> 元素！并且该页面中已经有一个 <p> 元素。
选择空
但是，如果我们使用selectAll(null)，则会选择nothing！该页面中已经有一个段落并不重要，我们的“输入”选择将始终包含数据数组中的所有元素。
让我们看看它的工作原理：
var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll(null)
.data(data)
.enter()
.append("p")
.text(d=> "I am a " + d + " paragraph!")
.style("color", String)<script src="https://d3js.org/d3.v4.min.js"></script>
<p>Look Ma, I'm a paragraph!</p>这就是选择 null 的目的：我们保证所选元素与数据数组之间存在不匹配。
选择空值和性能
由于我们没有选择任何内容，selectAll(null) 是迄今为止添加新元素的最快方式：我们不必遍历 DOM 搜索任何内容。
这是一个比较，使用jsPerf：
https://jsperf.com/selecting-null/1
在这个非常简单的场景中，selectAll(null) 的速度要快得多。在一个充满 DOM 元素的真实页面中，差异可能更大。
何时不使用 selectAll(null)
正如我们刚刚解释的，selectAll(null) 不会匹配任何现有的 DOM 元素。对于始终附加数据数组中的所有元素的快速代码来说，这是一个很好的模式。
但是，如果您打算更新您的元素，也就是说，如果您打算进行“更新”（和“退出”）选择，不要使用selectAll(null)。在这种情况下，请选择您计划更新的元素（或类）。
所以，如果你想根据不断变化的数据数组更新圆，你可以这样做：
//this is the "update" selection
var circles = svg.selectAll("circle")
.data(data);
//this is the "enter" selection
circles.enter()
.append("circle")
.attr("foo", ...
//this is the "exit" selection
circles.exit().remove();
//updating the elements
circles.attr("foo", ...
在这种情况下，如果您使用selectAll(null)，圆圈将不断地附加到所选内容中，堆积起来，并且不会删除或更新任何圆圈。
PS：正如历史的好奇，selectAll(null) 模式的创建可以追溯到 Mike Bostock 和其他人的这些 cmets：https://github.com/d3/d3-selection/issues/79
【讨论】：
以上是关于选择 null：D3 中 selectAll(null) 背后的原因是啥？的主要内容，如果未能解决你的问题，请参考以下文章
html D3：选择器，d3.select，.selectAll，.data：向DOM元素添加数据