在选择中使用一个点 (D3.js)

Question

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

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

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

谢谢

Answer 1

svg.selectAll(".circles")将选择 SVG 中具有 class 的所有元素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元素而不用担心类名。这种不带 的过滤.完全基于元素的名称。