在选择中使用点（D3.js）

Question

我发现很多代码在括号内使用了一个点，如下所示：

var node = svg.selectAll(".circles")。

有人可以帮我解释那个点吗？

谢谢

Answer 1

svg.selectAll(".circles")将选择SVG中包含类circles的所有元素。所以.基本上是指定你想根据类名选择。

执行svg.selectAll("circle")之类的操作会选择circle内的所有svg元素。这基于标记内的名称。例如，如果您在下面有以下代码，则会选择两个圆圈。

<svg>
  <circle></circle>
  <circle></circle>
</svg>

另一个解释得更好的例子：

假设我们有以下代码

<svg> 
    <g class="red"></g>
    <g class="blue"></g>
</svg>

在上面的情况中，如果我svg.selectAll(".red")，我将选择第一个g元素，因为它具有类名red。

但是，如果我执行svg.selectAll("g")，它将同时选择g个元素而不用担心类名。没有.的这种类型的过滤完全基于元素的名称。