Question

有人可以像我这样解释这个D3语法实际上是如何工作的吗？

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

它似乎只是追加树的链接。

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

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

Answer 1

逐行分析如下：

选择所有具有类link的DOM。

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

对所有这些链接绑定数据。这里的数据链接是一个数组。 links[0]绑定到第一个DOM（如果存在）。 links[1]绑定到第二个DOM（如果存在）。 ..so on

.data(links)
.enter()

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

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

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

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

这将是一个很好的read

Answer 2

我同意在它存在之前必须做出选择是完全令人困惑的。但是通过在选择上调用data(someDataArray)，此占位符选择现在绑定到您的数据。

现在，对于enter中data someDataArray的所有内容，d3将append对应的SVG line（并附加相关数据）。

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