Как построить данные о времени на графике линии D3.js

Question

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

var data = [{ time: 13:30, size: 100 }, { time: 13:37, size: 500}, { time: 13: 42, size: 300 } 
{ time: 13:51, size: 150 }, { time: 13:56, size: 175 }, { time: 15:59, size: 75 } 
{ time: 16:11, size: 75 }, { time: 16:37, size: 125 }, { time: 15:27, size: 200 } [...] 
{ time: 20:36, size: 500 }] 

Много значений времени и соответствующих значений размера. Конечно, я не хочу составлять каждое значение времени на этом графике. Вместо этого я хочу принять самое низкое значение, 13:30, а затем график времени на оси с 30-минутными интервалами (например, 13:30, 14:00, 14:30 ... 20:30), пока я не нахожусь в последний раз в моем массиве данных. В то же время, я хочу построить каждые значение размера. Таким образом, на графике будет отображаться галочка для 13:30 и 14:00, но значения, соответствующие 13.37, 13.42, 13.51, 13.56, будут отображаться на линии.

Как бы я это сделал?

Моя первая попытка была что-то вроде этого:

var graph = d3.select('.graph'), 
    WIDTH = 790, 
    HEIGHT = 250, 
    MARGINS = { 
     top: 20, 
     right: 20, 
     bottom: 20, 
     left: 50 
     } 

    xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]), 
    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([smallest, largest]), 
    xAxis = d3.svg.axis().scale(xScale), 
    yAxis = d3.svg.axis().scale(yScale).orient("left"); 

NB «самая маленькая» и «крупные» переменные являются наименьшие и наибольшие значения размера в моем массиве данных, вычисленной в другом месте. Очевидно, это неправильно, потому что это будет отображать каждое значение времени на оси (как объяснялось выше, я не хочу этого), и даже если бы я сделал это с ошибками и глюками.

Как я могу достичь того, чего хочу достичь?

Thx - Gaweyne

Answer 1

решаемые его. d3.time.scale not d3.scale.linear()

xScale = d3.time.scale(range([MARGINS.left, WIDTH - MARGINS.right]).domain(new Date([//Earliest Date//]), new Date([//Latest Date//]))