D3, даты по оси x, данные ширина даты

Question

Я визуализирую данные по дате. Я хочу что-то немного, как это:

Дело в том, что я хочу рисовать прямоугольники, ширина дней. Вот как я рисовать прямоугольники:

svg.selectAll(".my_class") 
.data(my_data) 
.enter() 
.append("rect") 
.attr({ 
    "width": function(d) { return x_scale.rangeBand(); }, 
    "height": function(d) { return h_scale(d.end - d.start); }, 
    "x": function(d) { return x_scale(new Date(d.date)); }, 
    "y": function(d) { return y_scale(d.end); }, 
    "class": function(d) { return d.device; } 
}); 

Проблема заключается в том, что для того, чтобы получить правильную ширину, я в конечном итоге объявить мою x_scale таким образом

d3.scale.ordinal() 
.domain(my_data.map(function (d) { return new Date(d.date); })) 
.rangeRoundBands([0, image_width]); 

, когда я, конечно, следовало бы использовать вместо d3.time.scale(). (Обратите внимание на отсутствие пробелов после 2, 7 и 12 февраля). Проблема в том, что я не вижу способа указать ширину прямоугольника с помощью d3.time.scale().

Обход - это создание прямоугольников с нулевой высотой на заднем конце для каждого дня в периоде. Это не , что отвратительно, но я чувствую, что смогу сделать лучше. Кроме того, я потерял бы тонкости, такие как .ticks(d3.time.weeks, 1) и должен сам их закрутить.

Любые указатели?

Answer 1

В конце концов, самым простым решением, которое я нашел, было использование порядковой шкалы и предоставление (иногда пустых) элементов для каждой даты в диапазоне.