Styling Axis Data in D3.js

Question

I have this piece of code which fetches data from MySQL and plots the graph, and it does it correctly. However, the marking segments such as the time span coming up in text appears to be in black. I've tried doing many changes but it was futile. I want to make it white.

Also, I want the x-axis to start with January and not 2015 as seen in the image.

<style> 
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
} 
</style>

<!-- load the d3.js library -->    
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 900 - margin.left - margin.right,
    height = 540 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%Y-%m-%d").parse;

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

// Define the line
var valueline = d3.svg.line()
    .x(function(d) { return x(d.lsdate); })
    .y(function(d) { return y(d.units); });

// Adds the svg canvas
var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.json("common/scripts/charts.php", function(error, data) {
    data.forEach(function(d) {
        d.lsdate = parseDate(d.lsdate);
        d.units = +d.units;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.lsdate; }));
    y.domain([0, d3.max(data, function(d) { return d.units; })]);

    // Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", valueline(data));

    // Add the X Axis
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the Y Axis
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

});

Screenshot: enter image description here

Could you tell me how? I'm referring a lot of examples, yet to figure it out. — Ankur Sinha, Apr 12 '15 at 03:47
Apply the style to `text` elements. See also http://stackoverflow.com/questions/12057145/d3-js-axis-labels-color-not-changing — Lars Kotthoff, Apr 12 '15 at 03:59

Henry S · Accepted Answer · 2015-04-14T06:41:48.300

As per @Lars's comment, you need to use the fill attribute to apply style to your text elements:

.axis text {
    fill: white;
}

Working fiddle here: http://jsfiddle.net/henbox/jr6pk4bj/1/

Aside: To prevent the x-axis starting with the year, but to always use month names, add this line when you define xAxis:

.tickFormat(d3.time.format("%B"));

Here's an update to the fiddle showing that change too: http://jsfiddle.net/henbox/jr6pk4bj/2/

Styling Axis Data in D3.js

1 Answers1