How to change text color of legend in d3js graph?

Question

Title; I'm following this tutorial on a stacked bar chart. I have a black background and wanted to change the color of the legend to white. I have already done so with the axis, but can't seem to edit the legend text. I tried

.legend {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 60%;
    color: white; //added, but doesn't work
}

From what I can tell, this code:

svg.append("g")
        .attr("class", "legendLinear")
        .attr("transform", "translate(0,"+(height+30)+")");
var legend = d3.legend.color()
        .shapeWidth(height/4)
        .shapePadding(10)
        .orient('horizontal')
        .scale(color);

creates the legend, but I have no idea how to modify the text label that labels the legend.

As you can probably tell, I am very new to d3 and javascript, and am very lost.
Any help is appreciated!

Thanks.

EDIT: I added this to the CSS but it removed the label completely instead of making it white (you can check this by changing the background of the tutorial to gray):

.legendLinear{
     fill: '#ffffff'
}

EDIT2: I changed it to:

.legendLinear text.label {
     fill: '#fff'
}

and it doesn't seem to work either; the text is still black.

tcasey tcasey · Accepted Answer · 2016-07-26T20:03:47

    .axis path {
    stroke: white;
}
   .axis line {
    stroke: white;
}
   text { 
    fill: white;
}

http://codepen.io/tcasey/pen/dXKrBx

Here's a working example to reference

How to change text color of legend in d3js graph?

3 Answers