24

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";
      }
  });
agamesh
  • 559
  • 1
  • 10
  • 26
Mobie
  • 1,850
  • 4
  • 19
  • 25

1 Answers1

42

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

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • thanks, this did the trick! However, I'm wondering how would I change the color of only 1 of the labels on my axies? For example, lets say I have 3 axis in this chart (it's a d3.js radial chart), and I want only one of the labels to be color #DE3378. Is this possible?? Thanks! – Mobie Aug 21 '12 at 17:20
  • 1
    The easiest way to do this would probably be to assign a different CSS class to those labels. – Lars Kotthoff Aug 21 '12 at 18:09