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?

`selection.attr("class", (d) => d3.select(this).attr("class") + " node" + d.id);` is exactly the same as `selection.classed((d) => "node" + d.id, true);` — Trash Can, Jan 31 '17 at 19:20
@Dummy No, it's not the same. If you do this `selection.classed((d) => "node" + d.id, true);`, it will give **all** your elements this strange class: `".(d) => "node" + d.name"`. Strange and not valid, by the way. The whole function will be treated as a string. Try it and you'll see. — Gerardo Furtado, Feb 01 '17 at 02:42

score 9 · Accepted Answer · edited Jun 20 '20 at 09:12

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>

Great find, thanks! Although, it's also a very new feature: http://caniuse.com/#feat=classlist — Ondra Žižka, Feb 07 '17 at 21:36
Well, it's not *that* new... At the time of writing most browsers support the property. It has been in FF and Chrome for some 4 years! IE 10 and 11, on the other hand, still *"Does not have support for classList on SVG or MathML elements."*. Since you are dealing with divs and nearly all other browsers seem to be fine with it I'd give it a try. — altocumulus, Feb 07 '17 at 21:47
Okay, tried, works, probably supported enough to rely on it. I'm changing accepted answer to this. — Ondra Žižka, Feb 09 '17 at 21:09

score 5 · Answer 2 · edited Sep 28 '17 at 17:26

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.

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

2 Answers2

Linked