D3 -- Can't set text color via css class

Question

I am using d3.js to create a javascript chart, and am trying to separate my styling from behavior as much as possible. To do this, I am trying to apply CSS classes using the .attr('class','...') method rather than using the .style() method. For the most part everything works just fine. However, when I try to apply a CSS class to set the stroke and fill of some text elements, it just doesn't work. The part that has me confused is the fact that the same process of using .attr() to apply a css class worked fine for the bars of the graph, and that I have no issue styling the text how I want if I use the exact same attributes, but instead with the .style() method to set each individually. Even more bizarre, I can use the .attr() method to apply a transparency class via css without any issue. Is there something I am missing here?

These are the css classes in question:

    .black {
    fill: rgb(41,41,41);
    stroke: rgb(41,41,41);
 }

 .red {
    fill: rgb(238,77,77);
    stroke: rgb(238,77,77);
    color: rgb(238,77,77);
 }

 .blue {
    fill: rgb(76,179,230);
    stroke: rgb(76,179,230);
 }

 .white {
    fill: rgb(255,255,255);
    stroke: rgb(255,255,255);
 }

and this is the code that, for some reason doesn't work:

 var severityText = chart.selectAll(".severity")
        .data(array)
        .enter().append("text")
        .attr("x", function (d, i) { return x(i) + barWidth / 2 - (5.0/8)*barNumberSize; })
        .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius / 2 - bubbleNumberSize*(1.0/4) })
        .style("font-size", bubbleNumberSize.toString() + "px")
        //this line isn't doing its job
        .attr('class','white')
        .attr('class','transparent')
        .text(function (d, i) { return d['severity'].toString() });

while this code does:

var severityText = chart.selectAll(".severity")
        .data(array)
        .enter().append("text")
        .attr("x", function (d, i) { return x(i) + barWidth / 2 - (5.0/8)*barNumberSize; })
        .attr("y", function (d, i) { return bubbleY(maxBubbleValue - d['severity']) - bubbleRadius / 2 - bubbleNumberSize*(1.0/4) })
        .style("font-size", bubbleNumberSize.toString() + "px")
        //works fine when written in this format.....why?
        .style('fill',white)
        .style('stroke',white)
        .attr('class','transparent')
        .text(function (d, i) { return d['severity'].toString() });

Answer 1

It's better to use classed

.classed('white', true);

or even

.classed('white transparent', true);

This saves a lot of book keeping what class was set/removed later on. Adding a data provided class name is more difficult. See ie http://bl.ocks.org/clemens-tolboom/7231676

Answer 2

To set multiple classes, use a single string that contains all of them instead of chaining the calls, which will overwrite it.

That is, instead of

.attr('class','white')
.attr('class','transparent')

do

.attr('class', 'white transparent')