D3.js: рассчитать шкалу времени оси x для гистограммы?

Question

У меня есть следующий набор данных:

var data = [ 
    { 
    "air_used": 0.660985, 
    "datestr": "2012-12-01 00:00:00", 
    "energy_used": 0.106402 
    }, 
    { 
    "air_used": 0.824746, 
    "datestr": "2013-01-01 00:00:00", 
    "energy_used": 0.250462 
    } ... 
] 

И я хочу нарисовать гистограмму (для air_used) и линейный график (для energy_used), которые выглядят так:

Моя проблема заключается в том, что на данный момент с использованием x-scale, который я использую, график выглядит следующим образом: в основном, бары находятся в неправильном положении, а последний стержень падает с графика:

Вот JSFiddle с полным кодом и рабочим графиком: http://jsfiddle.net/aWJtJ/4/

Чтобы достичь того, чего я хочу, я думаю мне нужно изменить й-масштаб, так что есть дополнительная ширина до первой точки данных и после последней точки данных и так, чтобы полосы сдвигались влево на половину ширины каждого бара.

Может ли кто-нибудь помочь мне разобраться, что мне нужно сделать с помощью x-scale?

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

Если возможно, я хочу продолжить шкалу времени для оси x, а не порядковый масштаб, потому что я хочу использовать умные форматы титров D3 и синтаксические анализаторы даты, например. xAxis.ticks(d3.time.weeks, 2).

Answer 1

Разверните свой домен на +1 и -1 месяц с фактической протяженности ваших данных. Это позволит заполнить график дополнительными месяцами с каждой стороны, а затем обновить ширину полосы, чтобы добавить 2 к количеству элементов данных.

var barRawWidth = width/(data.length + 2); 

Смотрите эту скрипку: http://jsfiddle.net/reblace/aWJtJ/6/

Если вы хотите, чтобы скрыть нижнюю и верхнюю границу месяцев, вы можете взломать его, как это: http://jsfiddle.net/reblace/aWJtJ/7/, просто добавляя и вычитая 20 дней вместо целого месяца, но есть, вероятно, более элегантные способы сделать это.

var xExtent = d3.extent(data, function(d) { return d.date; }); 
var nxExtent = [d3.time.day.offset(xExtent[0], -20), d3.time.day.offset(xExtent[1], 20)]; 
x.domain(nxExtent); 

Answer 2

Как было отмечено в комментариях, я думаю, что лучший подход состоит в использовании d3.scale.ordinal. Обратите внимание, что использование этого не мешает вам использовать парсеры d3.time, но вам нужно учесть ширину полосы, чтобы выровнять линию с полосками.

Пример решения здесь: http://jsfiddle.net/jcollado/N8tuR/

Соответствующий код из приведенного выше решения заключается в следующем:

// Map data set to dates to provide the whole domain information 
var x = d3.scale.ordinal() 
    .domain(data.map(function(d) { 
     return d.date; 
    })) 
    .rangeRoundBands([0, width], 0.1); 

... 

// Use x.rangeBand() to align line with bars 
var line = d3.svg.line() 
    .x(function(d) { return x(d.date) + x.rangeBand()/2; }) 
    .y(function(d) { return y(d.energy_used); }); 

... 

// Use x.rangeBand() to set bar width 
bars.enter().append("rect") 
    .attr("class", "air_used") 
    .attr("width", x.rangeBand()) 
    ... 

Обратите внимание, что дата разбора код был перемещен, чтобы иметь d.date доступные при создании х масштаб. Кроме того, заявления d3.time не были изменены вообще.