My current project involves using D3.js and I've encountered a particular challenge that has me stumped.
In the CSV file I'm working with, there are columns labeled "Set" and "Year". My goal is to extract values from these columns and use them as class names. Here's what I've got so far...
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 method works well in assigning appropriate class names to the data points. However, when attempting to incorporate the "Year" column into the mix, the class names based on "Set" get overwritten by those of "Year".
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;
}
});
I am seeking guidance on how to modify this code so that it appends additional class names instead of replacing existing ones.
If anyone can provide some assistance, I would greatly appreciate it.