How can I toggle the class of all elements in a selection?

  • A+

I am trying to write a function that adds a class to all elements in a selection when those elements do not have that class yet, and vice versa:

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

This gives an error that .classed is not a function. The documentation states that .classed should be called on a selection, so I tried changing the last line into !"non-active"), but that does not work either ("t.getAttribute is not a function"). What is going wrong and what is the correct way?

Note: I have already solved my problem with the 2 separate functions underneath, but I find it ugly to split a toggle into 2 parts.

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

Gerardo's answer is pointing in the right direction by using Element.classList, but the proposed solution can still be simplified. As it turns out, the classList property already features a .toggle() method, which works as follows:

toggle( String [, force] )
When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true. When a second argument is present: If the second argument evaluates to true, add specified class value, and if it evaluates to false, remove it.

Your function can thus be written as:

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


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: