How can I use d3 classed selection to have name as function

Question

I am using d3 classed selections and in first parameter, instead of a string, I want to use a function that will returns class name.

selection.classed(name[, value])

I understand I can do the same using .attr() as mentioned here, but I want to be able to do the same using classed.

How can I do this?

Answer 1

The class name you provide there needs to be fixed, i.e. you cannot have something like function(d) { return d; }. If you need the class name to be determined by the data, you need to use .attr("class", ...).

If you're worried about overwriting existing class names, note that you can retrieve and prepend those as follows.

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

Answer 2

I encountered a similar problem in which I wanted to add one class if a property on my datum was true and a different class if the property was false:

selection.classed('class-one', function(d) { return d.property; })
    .classed('class-two', function(d) { return d.property; });

If you have a small number of classes to add then something like this might be worth considering.