score:1

Accepted answer

according to the api, the axis generator automatically sets the font-size and the font-family of the ticks in the container g element, this being the default style (code copied from the api's example):

//styles applied to the outer g element:
<g fill="none" font-size="10" font-family="sans-serif" text-anchor="middle">
    <path class="domain" stroke="#000" d="m0.5,6v0.5h880.5v6"></path>
    <g class="tick" opacity="1" transform="translate(0,0)">
        <line stroke="#000" y2="6" x1="0.5" x2="0.5"></line>
        <text fill="#000" y="9" x="0.5" dy="0.71em">0.0</text>
    </g>
    //etc...
</g>

thus, it seems that due to the specificity and precedence rules, this style prevails over your body css style.

to change the ticks, you'll have to specify text in your css (or using a class or an id).

score:2

as gerardo mentioned, the api will draw with fill #000 as default. a work around would be to re-select the text and re-style it. which looks something like this:

var xscale = d3.scalepoint().domain(["blue", "red", "green"]).range([margin.left, width-margin.right]);

// add the x axis
var xticks = svg.append("g")
     .attr("transform", "translate(0," + (height - margin.bottom) + ")")
     .attr("class", "axis")
   .call(d3.axisbottom(xscale)
     );

xticks.selectall('text').attr('fill', function(d){
    return d;
  });

Related Query