d3.js axis labels - color not changing

Question

I'm creating my axis with the following text, however the color of the labels is not changing properly; the color the text remains black. Does anybody know why?

  // create Axis   svg.selectAll(".axis")       .data(d3.range(angle.domain()[1]))     .enter().append("g")       .attr("class", "axis")       .attr("transform", function(d) { return "rotate(" + angle(d) * 180 / Math.PI + ")"; })     .call(d3.svg.axis()       .scale(radius.copy().range([-5, -outerRadius]))       .ticks(5)       .orient("left"))     .append("text")       .attr("y",          function (d) {           if (window.innerWidth < 455){             return -(window.innerHeight * .33);           }           else{             return -(window.innerHeight * .33);           }         })       .attr("dy", ".71em")       .attr("text-anchor", "middle")       .text(function(d, i) { return capitalMeta[i]; })       .attr("style","font-size:12px;")       .style("color","#DE3378");   <--------------- adding color attribute here... 

EDIT - trying to color different axis labels different colors with the following code, however this is not working properly...

  .style(function() {       for (var i = 0; i < unhealthyArray.length; i++) {               if ($.inArray(unhealthyArray[i], capitalMeta) != -1)                     return "fill","red";               else                     return "fill","black";       }   }); 

Answer 1

You need to use the stroke attribute (for the outline) or fill (for the fill colour). See e.g. this tutorial.