问题描述
我一直在学习 d3，我对选择有点困惑.考虑以下示例:
I've been learning about d3, and I'm a bit confused about selecting. Consider the following example:
http://bl.ocks.org/mbostock/1021841
具体来说，让我们看看这一行:
Specifically, let's look at this line:
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", 8)
.style("fill", function(d, i) { return fill(i & 3); })
.style("stroke", function(d, i) { return d3.rgb(fill(i & 3)).darker(2); })
.call(force.drag)
.on("mousedown", function() { d3.event.stopPropagation(); });
在 文档 中，它说:选择是从当前文件."我解释这意味着 svg.selectAll(.node) 创建一个从当前文档中提取的 .node 类元素的数组，但据我所知没有这样的元素！除非我感到困惑 - 我几乎可以肯定我是 - 文档中唯一一个被赋予类节点"的地方是在选择已经发生之后(当我们编写 .attr("class", "节点")).
In the documentation it says, "A selection is an array of elements pulled from the current document." I interpret this to mean that svg.selectAll(.node) creates an array of elements of class .node pulled from the current document, but as far as I can tell there are no such elements! Unless I'm confused - and I'm almost certain that I am - the only place in the document where something is given the class "node" is after the selection has already occurred (when we write .attr("class", "node")).
那么这里发生了什么?svg.selectAll(".node") 实际上选择了什么?
So what is going on here? What does svg.selectAll(".node") actually select?
推荐答案
虽然乍一看，这可能看起来像一个简单而愚蠢的问题，但对于每个尝试做一些严肃事情的人来说，它的答案可能是最重要的使用 D3.js.请始终牢记，D3.js 就是将数据绑定到某个 DOM 结构，并提供使数据和文档保持同步的方法.
Although, at first sight, this may look like a simple and silly question, the answer to it is probably the most important one for everyone trying to do some serious work with D3.js. Always keep in mind, that D3.js is all about binding data to some DOM structure and providing the means of keeping your data and the document in sync.
你的陈述正是这样做的:
Your statement does exactly that:
选择所有具有
node类的元素.这很可能会返回一个空的选择，就像你的情况一样，但它仍然是一个 <代码>d3.selection.
Select all elements having class
node. This may very well return an empty selection, as it is in your case, but it will still be ad3.selection.
将数据绑定到此选择.基于上述选择，这将在每个元素的基础上计算连接检查新数据是否 a) 尚未绑定到此选择，b) 之前已绑定，或 c) 之前已绑定但未绑定不再包含在新数据中.根据此检查的结果，选择将分别分为进入、更新或退出选择.
Bind data to this selection. Based on the above mentioned selection this will, on a per-element basis, compute a join checking if the new data is a) not yet bound to this selection, b) has been bound before, or c) was bound before but is not included in the new data any more. Depending on the result of this check the selection will be divided into an enter, an update, or an exit selection, respectively.
因为您的选择最初是空的.所有数据都将在通过调用 selection.enter() 检索的输入选择中结束.
Because your selection was empty in the first place. All data will end up in the enter selection which is retrieved by calling selection.enter().
您现在可以通过在输入选择上调用 selection.append() 来附加与新绑定数据相对应的新元素.
You are now able to append your new elements corresponding to the newly bound data by calling selection.append() on the enter selection.
看看优秀文章 Thinking with JoinsMike Bostock 对正在发生的事情进行了更深入的解释.
Have a look at the excellent article Thinking with Joins by Mike Bostock for a more in-depth explanation of what is going on.
这篇关于基本d3:为什么你可以选择还不存在的东西?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，WP2