如何切换选区中所有元素的类？

Question

我正在尝试编写一个函数,当这些元素还没有该类时,它会向选择中的所有元素添加一个类,反之亦然:

function toggleLinksActivity(d) {
  d3.selectAll(".link")
    .filter(l => l.target == d)
    .classed("non-active", l => !l.classed("non-active"));
}

这给出了一个.classed不是函数的错误.该文件指出,.classed应在选择被调用,所以我试图改变过去的行成!d3.select(l).classed("non-active"),但是,这并不工作,要么("t.getAttribute不是一个函数").出了什么问题,正确的方法是什么？

注意:我已经用下面的2个独立函数解决了我的问题,但是我发现将切换分成2部分很难看.

function activateLinks(d) {
  d3.selectAll(".link")
    .filter(l => l.target == d)
    .classed("non-active", false);
}

function deactivateLinks(d) {
  d3.selectAll(".link")
    .filter(l => l.target == d)
    .classed("non-active", true);
}

Answer 1

Gerardo的答案是通过使用指向正确的方向Element.classList,但建议的解决方案仍然可以简化.事实证明,该classList属性已经具有一个.toggle()方法,其工作方式如下:

toggle(String [,force])
当只有一个参数时:切换类值; 即,如果类存在然后删除它并返回false,如果不存在,则添加它并返回true.当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则将其删除.

因此,您的功能可以写成:

function toggleLinksActivity(d) {
  d3.selectAll(".link")
    .each(function(l) {
      if (l.target == d) {
        this.classList.toggle("non-active");
      }
    });
}