D3.js How to apply multiple classes when using a function

Question

I'm currently using D3.js and have come across a problem that I just can't seem to solve.

I have a CSV that has a column named "Set" and a column named "Year". I want to pull the values from these columns and use them as class names. This is what I currently have...

var circle = svg.selectAll("circle")             .data(data)             .enter()             .append("circle")             .attr("class", function(d) {                 if (d["Set"] == 1)                 {                     return "set-1";                 }                 if (d["Set"] == 2)                 {                     return "set-2";                 }             }); 

This works perfectly fine and gives each data-point a class name. When I try the following however, the "Set" class names are over written by the "Year" class names.

var circle = svg.selectAll("circle")             .data(data)             .enter()             .append("circle")             .attr("class", function(d) {                 if (d["Set"] == 1)                 {                     return "set-1";                 }                 if (d["Set"] == 2)                 {                     return "set-2";                 }             .attr("class", function(d) {                 if (d["Year"] == 2012)                 {                     return "2012";                 }                 if (d["Year"] == 2013)                 {                     return "2013;                 }             }); 

How can this code be rectified so that it adds on additional class names as opposed to over-writing them.

Hope someone can help.

Answer 1

There is an alternative approach that can be useful. You can assign or remove classes from an element using selection.classed('class-name', true) or selection.classed('class-name', false):

var circle = svg.selectAll("circle")     .data(data)     .enter()     .append('circle')     .classed('2012', function(d) { return d['Year'] === 2012; })     .classed('2013', function(d) { return d['Year'] === 2013; })     .classed('set-1', function(d) { return d['Set'] === 1; })     .classed('set-2', function(d) { return d['Set'] === 2; }); 

I prefer this way because you can remove the classes from an element using the same syntax.