D3.js: Adding class whose name is based on data

Question

D3 has 2 ways of setting a class:

selection.attr("class", (d) => d.isFoo ? "foo" : "");
selection.classed("foo", (d) => d.isFoo)

I'm looking for a way to add a class named as per the data. I.e. something like:

selection.classed((d) => "node" + d.id, true);

• I don't want to use id because multiple DOM elements will share that class.
• I don't want to use attr because it may potentially overwrite other classes already there.

So I could do

selection.attr("class", (d) => d3.select(this).attr("class") + " node" + d.id);

which feels a bit hackish.

Any better solution? Or a feature underway?

Answer 1

Although Gerardo's answer is correct and comes with a proper explanation, I think, the easiest way to mess with an element's classes is to resort to its classList property which it inherits from the Element interface.

The Element.classList is a read-only property which returns a live DOMTokenList collection of the class attributes of the element.

Although the property itself is read-only, it provides methods for adding, removing and toggling classes. Calling .add() will automatically take care of classes previously set and check if the class to add has already been assigned to the element:

add( String [, String] )

Add specified class values. If these classes already exist in attribute of the element, then they are ignored.

Adding a class based on data can thus be done using selection.each():

divs.each(function(d) {
  this.classList.add("node" + d.name);
});

Within the .each() method this points to the actual element and can be used to directly access the classList property.

var data = [{name: "foo"}, 
            {name: "bar"},
            {name: "baz"}];

var body = d3.select("body");

var divs = body.selectAll("myDivs")
    .data(data)
    .enter()
    .append("div")
      .attr("class", "someClass");

divs.each(function(d) {
  this.classList.add("node" + d.name);
});

//log the classes, you can see the previous class ("someClass") was not overwritten:
divs.each(function() {
    console.log(d3.select(this).attr("class"))
})

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

Unfortunately, you cannot pass a function to classed() the way you want (i.e., as the first argument). The documentation is clear about classed():

selection.classed(names[, value])

If a value is specified, assigns or unassigns the specified CSS class names on the selected elements by setting the class attribute or modifying the classList property and returns this selection. The specified names is a string of space-separated class names. (emphasis mine)

Thus, you cannot pass a function to the class name. The class name there has to be fixed.

That being said, what you're doing right now to add a class name without overwriting a previously existing class...

selection.attr("class", (d) => d3.select(this).attr("class") + " node" + d.id);

... seems to be the standard way among D3 coders, even if you feel that it's a hack. However, you need a small modification here: don't use this with an arrow function, it's not going to work (check this example d3 v4 retrieve drag DOM target from drag callback when `this` is not available). Thus, this is the correct snippet:

selection.attr("class", function (d){
    d3.select(this).attr("class") + " node" + d.id);
});

Yet, it is possible to use classed() the way you want, not directly (again, you cannot pass a function to it), but in a odd workaround. Just to show you a way to do it using classed(), I created a demo code that is way more hackish than your solution, for the sake of curiosity. Have a look at it:

var data = [{name: "foo"}, 
            {name: "bar"},
            {name: "baz"}];

var body = d3.select("body");

var divs = body.selectAll("myDivs")
    .data(data)
    .enter()
    .append("div")
    .attr("class", "someClass");

//here comes the hack:
divs.each(function(d) {
    d3.select(this).classed("node" + d.name, () => d3.select(this).datum().name == d.name)
});

//log the classes, you can see the previous class ("someClass") was not overwritten:
divs.each(function() {
    console.log(d3.select(this).attr("class"))
})

<script src="https://d3js.org/d3.v4.min.js"></script>

As d.name is provided by the each() function, the first argument ("node" + d.name) is in fact a string.