时间戳

首页 > 解决方案 > 如何选择具有（任何）类的所有元素

javascript - 如何选择具有（任何）类的所有元素

问题描述

我正在使用 D3selectAll执行转换。我有大约 260 条路径，但其中只有 80 条有课程。

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

标签： javascriptvue.jsd3.js

解决方案

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

selection.attr("class")

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

因此，您只需要检查 getter。

例如，假设你有这个 SVG 有 5 个路径，其中 3 个有一个类：

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

通过在 a 中使用 getter，filter我们只能获取具有类的元素，即使类不同：

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>

推荐阅读