Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

d3.js axis labels - color not changing

Tags:

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";       }   }); 
like image 454
Mobie Avatar asked Aug 21 '12 14:08

Mobie


1 Answers

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

like image 102
Lars Kotthoff Avatar answered Sep 28 '22 16:09

Lars Kotthoff