Javascript 如果我附加的内容似乎完全依赖于.append（）调用，那么在数据联接期间传递给d3.selectAll（）的术语是否重要？

我在d3图表中添加了一些圆圈，对于传递给

svg.selectAll（）

的参数有些困惑。在这里，我对我的数据和一些圆运行数据联接：

svg.selectAll("top")
    .data(data)
    .enter()
    .append("circle")
    .attr({
        "cx": function(d,i){return i*50+50},
        "cy": 60,
        "r": function(d) {return rScale(parseFloat(d.value));},
        "class": "top"
    })
    .style({
        "fill": "CornflowerBlue",
        "stroke": "blue",
        "opacity": 0.8
    });

从我使用的代码来看，这段代码似乎与以下代码相同：

    svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr({
            "cx": function(d,i){return i*50+50},
            "cy": 60,
            "r": function(d) {return rScale(parseFloat(d.value));},
            "class": "top"
        })
        .style({
            "fill": "CornflowerBlue",
            "stroke": "blue",
            "opacity": 0.8
        });

为了省去查找两个代码块之间的一个差异的麻烦，它是

selectAll（“top”）

vs.

selectAll（“circle”）

---

每当我浏览示例时，我几乎总是看到选择和附加元素之间的匹配，但这似乎并不重要，至少在我运行它时，上面的代码中没有。起初，我认为您可以使用一些类似于类选择的内容并向其添加元素（

svg.selectAll（.top”）

），但这也不起作用。那么，

d3.selectAll（）

的参数的基本用途是什么呢？

TLDR：是的，这很重要——始终选择您随后附加的元素

更详细的解释：论点的目的是明确的：

选择与指定选择器匹配的所有元素

您给

selectAll（）

的参数决定了您随后操作的选择中的结果。例如，如果您

d3.selectAll（“圆圈”）

，则该选项将包含页面上的所有

circle

元素。请注意，如果没有此类元素，则选择将为空（最初创建可视化时通常为空）

你是对的，在你的情况下，你通过什么论点都不重要。这是因为无论选择器字符串是什么，页面上都没有任何元素，并且所选内容为空。但是，当页面上有您可能需要更新的元素时，这并不重要。选择的内容决定D3的数据绑定的功能，特别是哪些数据绑定到哪个元素，哪些元素被确定为“新”（输入选择）、“更新”（更新选择）和“旧”（退出选择）（更多信息，请参阅）

简言之，如果您选择了错误的元素，那么您希望更新的元素将不会更新，而其他元素将在不应该更新的时候出现。图像选择

顶部

，并显示一些

圆圈

元素。所选内容将为空，因此将为每个基准添加其他圆，即使您确实希望更新现有圆

好的，那么如果您只想使用enter选择来附加新元素并且永远不会更新它们，那么为什么要关心这个问题呢？首先，它使您的代码更易于阅读和理解。第二，也是更重要的一点，当您（或其他人）最终决定要更新现有元素时，它避免了细微的错误

注释后编辑：如果需要区分多组相同元素，请使用类：

 d3.selectAll("circle.top").data(top)
   .enter().append("circle").classed("top", true);
 d3.selectAll("circle.bottom").data(bottom)
   .enter().append("circle").classed("bottom", true);

---

enter（）如何在初始创建中工作的根本原因与所谓的数据连接或enter-update-exit模式有关。这里有一个链接：

---

Lars，太好了，谢谢！不过，我确实有一个问题。我在代码中使用了它，因为我需要在SVG上放置两次圆圈；一个在顶部是一行，表示比率大小，另一个在下面。上面的代码对我很有用，因为我正在加倍努力；但是，如果我两次都选择All（“圆”），我就不能从同一数据中附加第二行圆。在这种情况下，我是否仍然可能得到您提到的细微错误，或者我的做法是否符合“最佳实践”的要求？您可以使用类来实现这一点。我已经更新了答案。