在D3中的思考-选择vs附加

Question

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

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

它所做的似乎只是在树上附加链接。

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

为什么在项目实际存在之前有一个“选择”？选择真的意味着“插入”吗？

Answer 1

逐行分析如下：

选择所有具有类link的DOMs。

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

与所有这些链接绑定数据。这里，数据链接是一个数组。如果存在，links[0]将绑定到第一个DOM。如果存在，links[1]将被绑定到第二个DOM。..so打开

.data(links)
.enter()

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

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

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

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

这将是一个很好的朗读

Answer 2

我同意，要在选择之前作出选择是完全令人费解的。但是，通过对所选内容调用data(someDataArray)，此占位符选择将绑定到您的数据。

现在，对于将enter data in someDataArray的所有内容，d3将append一个相应的SVG line (并附加相关数据)。

如果someDataArray更改，d3可以用update更改附加的SVG节点的外观，甚至可以删除不再与exit关联数据的旧节点。