javascript - 如何选择具有(任何)类的所有元素

Question

我正在使用 D3 selectAll 执行转换。我有大约 260 条路径，但其中只有 80 条路径有一个类。

我应该如何选择所有具有类的路径？

Answer 1

您不需要 D3 来检查元素是否具有类，但这是一个基于 D3 的答案。使用 D3 setter/getter 时...

selection.attr("class")

... 对于没有类的元素，它将返回 null。

因此，您只需要检查 setter/getter 即可。

例如，假设您的 SVG 有 5 条路径，其中 3 条有一个类:

<svg>
  <path></path>
  <path class="foo"></path>
  <path class="bar"></path>
  <path class="baz"></path>
  <path></path>
</svg>

通过在 filter 中使用 getter，我们可以只获取具有类的元素，即使类不同也是如此:

const pathsWithClass = d3.selectAll("path")
  .filter(function() {
    return d3.select(this).attr("class")
  });

console.log("Elements with class: " + pathsWithClass.size())

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
  <path></path>
  <path class="foo"></path>
  <path class="bar"></path>
  <path class="baz"></path>
  <path></path>
</svg>