Данные о оси укладки в D3.js

Question

У меня есть этот фрагмент кода, который извлекает данные из MySQL и отображает график, и он делает это правильно. Тем не менее сегменты маркировки, такие как временной интервал, появляющийся в тексте, выглядит черным. Я пробовал делать много изменений, но это было бесполезно. Я хочу сделать его белым.

Кроме того, я хочу, чтобы ось x начиналась с января, а не до 2015 года, как видно на изображении.

<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); 

}); 

Скриншот:

Answer 1

Согласно @ комментарий Ларса, вы должны использовать атрибут fill применить стиль к вашим text элементов:

.axis text { 
    fill: white; 
} 

Работа скрипку здесь: http://jsfiddle.net/henbox/jr6pk4bj/1/

Помимо этого: Чтобы предотвратить ось x, начинающуюся с года, но всегда использовать mon го названия, добавьте эту строку при определении xAxis:

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

Вот обновление на скрипке показывая, что изменение тоже: http://jsfiddle.net/henbox/jr6pk4bj/2/