Javascript 在D3中思考-选择vs追加

有人能像我5岁一样解释一下D3语法是如何工作的吗

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');

它似乎只是将链接附加到树上

但我读到的是“选择类链接的所有内容，并附加一个属性class=link”。在这些存在之前它如何选择是令人费解的

为什么在项目实际存在之前有一个“选择”？

---

select真的是“插入”吗？

逐行分析如下：

选择所有具有类

链接的DOM

var link = svg.selectAll('.link')

将数据绑定到所有这些链接。这里的数据链接是一个数组。

链接[0]

绑定到第一个DOM（如果存在）。

链接[1]

绑定到第二个DOM（如果存在）。 …等等

.data(links)
.enter()

案例1: 如果数组链接有2个元素，而选择DOM元素有0个元素。 然后，2行DOM将附加到svg DOM

    .append('line')
    .attr('class', 'link');

案例2: 如果数组链接有2个元素，而选择DOM元素有1个元素。 然后，一个新行DOM将附加到svg DOM

    .append('line')
    .attr('class', 'link');

案例3: 如果数组链接有2个元素，而选择DOM元素有2个或更多元素。 然后将0新行DOM追加到svg DOM

    .append('line')
    .attr('class', 'link');

---

这将是一个很好的

我同意在它存在之前必须做出选择是完全令人困惑的。但是通过对选择调用

data（someDataArray）

，这个占位符选择现在绑定到您的数据

现在，对于将

在
someDataArray
中输入
数据的所有内容，d3将
附加
相应的SVG
行（并附加相关数据）

如果
someDataArray
发生更改，d3可以使用
update
更改连接的SVG节点的外观，甚至可以删除不再与
exit
关联数据的旧节点。此链接提供了一步一步的说明-谢谢。这确实解释了这一点，并回答了一个显而易见的问题，即API是反直觉的，因为它多次询问“但是，等等，什么？”。你甚至不需要最后一行
.attr（“class”，“link”）
就可以工作。读这个：这似乎可以解释它。沃特？这是对的。即使是作者在写这篇文章时也知道这是令人困惑的。。。一开始会让人困惑，但一旦理解了核心概念，语法就会变得更直观。
selectAll（'.link'）
概括了将数据绑定到元素的用例。1.没有元素，因此添加所有数据。2.存在一些现有元素，但小于数据的大小，因此更新现有元素并输入新元素。3.现有的元素多于数据的大小，因此请更新现有元素，并删除其余元素。这基本上是一个单排积垢作业。我认为这个答案不合理。所有这些链接。。。关键是在表达式的开头没有链接。链接是在“附加”中选择后创建的。是的，正确！之前没有链接，因此
svg.selectAll（'.link'）
将给出一个空选择。这是我的案子。在这个空的选择中，您将根据您传递的数据添加新的链接。实际上，我刚刚读了一篇关于连接的博斯托克文章。它不会给出一个空的选择，而是用新创建的节点设置一个“enter（）”。非常奇怪的API，但向后看和眯着眼睛我可以看到它在做什么。但愿它更具可读性。