Показывать числа как раз в xAxis строки в dc.js

Question

У меня есть файл csv со столбцом (arr_time_), который представляет, какой 15-минутный период времени произошла в этой конкретной транзакции.

Значение в этом диапазоне от столбца 0 to 28, каждый из которых представляет собой 15-минутный период, начинающийся в 6 часов утра. Так 0 означает 6 am, 1 означает 6:15 am и т.д. Это как моя линия диаграмма выглядит сейчас:

Мой dc.js код этой строки диаграммы заключается в следующем:

timeChart 
    .width(800) 
    .height(230) 
    .margins({top: 10, right: 50, bottom: 30, left: 30}) 
    .dimension(arrivalTimeDim) 
    .group(arrivalPer15min, "Observed") 
    // .ordinalColors(["orange"]) 
    // .stack(histArrivalPer15min, "historical") 
    .transitionDuration(500) 
    .renderArea(true) 
    // .elasticX(true) 
    .elasticY(true) 
    .x(d3.scale.linear().domain([minDate, maxDate+.5]))//minDate=0, maxDate=28 
    .renderHorizontalGridLines(true) 
    // .legend(dc.legend().x(60).y(10).itemHeight(13).gap(5)) 
    .xAxisLabel("Time") 
    .yAxis().ticks(4); 
    // .xAxis().ticks(5); 

Я хочу изменить xAXis на этой диаграмме, чтобы он показывал 6, 6:15, .... Я пробовал использовать .range и xUnits, но, возможно, потому, что я сделал это неправильно, это не сработало. Как я могу это исправить?

Answer 1

Для этого вам нужно будет создать даты в наборе данных:

var today = new Date(2015, 12, 25);//sample date for which the data is a part i am considering it to to be 25 Dec 2015 
    var hrs = 6;//since you want to start from 6 in the morning 
    experiments.forEach(function(x) { 
    x.Speed = +x.Speed; 
    //making the Date data 
    x.Date = new Date(today.getTime()+ hrs*60*60*1000) 
    hrs +=0.25;//after 15 minutes data 
    }); 

//this will calculate the max min for the date 
var extent = d3.extent(experiments, function(d){return d.Date}); 

Наконец установить ось, как показано ниже:

chart 
    .width(768) 
    .height(480) 
    .x(d3.time.scale().domain(extent)) 
    .xUnits(d3.time.minute) 

Рабочий пример кода here.