lineChart xAxis неправильная дата

Question

Почему мой lineChart показывает месяц в xAxis вместо воскресенья?

Спасибо за помощь =)

Вот мой код:

вар hitslineChart = dc.lineChart ("# диаграмма линии-hitsperday");

var data = [ 
     {date: "12/27/2012", http_404: 2, http_200: 190, http_302: 100}, 
     {date: "12/28/2012", http_404: 2, http_200: 10, http_302: 100}, 
     {date: "12/29/2012", http_404: 1, http_200: 300, http_302: 200}, 
     {date: "12/30/2012", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "12/31/2012", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/01/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/02/2013", http_404: 1, http_200: 10, http_302: 1}, 
     {date: "01/03/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/04/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/05/2013", http_404: 2, http_200: 90, http_302: 0}, 
     {date: "01/06/2013", http_404: 2, http_200: 200, http_302: 1}, 
     {date: "01/07/2013", http_404: 1, http_200: 200, http_302: 100} 
     ]; 

var ndx = crossfilter(data); 
var parseDate = d3.time.format("%m/%d/%Y").parse; 
data.forEach(function(d) { 
    d.date = Date.parse(d.date); 
    d.total= d.http_404+d.http_200+d.http_302; 
}); 

var dateDim = ndx.dimension(function(d) {return d.date;}); 
var hits = dateDim.group().reduceSum(function(d) {return d.total;}); 
var minDate = dateDim.bottom(1)[0].date; 
var maxDate = dateDim.top(1)[0].date; 

hitslineChart 
    .width(500).height(200) 
    .dimension(dateDim) 
    .group(hits) 
    .x(d3.time.scale().domain([minDate,maxDate])) 
    .xAxis().ticks(5) 
    .yAxisLabel("Hits per day"); 

dc.renderAll();![the result][1] 

результат на XAxis является: Thu27-Fri28-Sat29-Dec30-Mon31-2013-Wed02-Thu03-Fri04-Sat05-Jan06 ...

Answer 1

1) Вы хотите, чтобы разобрать ваш входящие данные с использованием форматирования даты:

d.date = Date.parse(d.date); \\ Old 
d.date = parseDate.parse(d.date); \\ New 

Это будет явно соответствовать формату ваших входных данных.

2) Если вы хотите, чтобы данные были сгруппированы по дням, вам необходимо указать это в своем измерении. Метод d3.time.day helper установит время до 00:00:00 по предоставленным данным. Это делает группу данных вместе, как вы хотите:

var dateDim = ndx.dimension(function(d) {return d.date;}); \\old 
var dateDim = ndx.dimension(function(d) {return d3.time.day(d.date);}); \\ new 

Это не ясно, хотите ли вы точку в день (Jan 1, 2 Jan, 3 Jan, и т.д.) или точку в день недели (Sun, Пн, Вт). Метод d3.time.day группирует дату по календарному дню.

3) Вы можете указать формат клеща, используя следующий метод:

.xAxis().tickFormat(function(v) {return displayDate(v)}); 

Подробная информация о времени форматирования доступна на https://github.com/mbostock/d3/wiki/Time-Formatting.

Вот jsfiddle, который адаптирует свой код для отображения дня недели на оси х: http://jsfiddle.net/djmartin_umich/6V4Ey/

Я надеюсь, что это помогает! -DJ