javascript - 在选择中使用点 (D3.js)

Question

我发现很多代码在括号内使用点，如下所示:

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

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

谢谢

Answer 1

svg.selectAll(".circles") 将选择 SVG 中具有 circles 类的所有元素。所以 . 基本上是指定您要根据类名进行选择。

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

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

另一个更好解释的例子:

假设我们有以下代码

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

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

但是，如果我执行 svg.selectAll("g")，它将选择两个 g 元素，而不必担心类名称。这种不带 . 的过滤仅基于元素的名称。