title: D3.js How to apply multiple classes when using a function
body: <p>I'm currently using D3.js and have come across a problem that I just can't seem to solve.</p>
  
  <p>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...</p>
  
  <pre><code>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";
                  }
              });
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>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;
                  }
              });
  </code></pre>
  
  <p>How can this code be rectified so that it adds on additional class names as opposed to over-writing them.</p>
  
  <p>Hope someone can help.</p>