Добавить прямоугольники над датами D3

Question

У меня есть CSV;

start_dt,end_dt
2012-08-01 00:00:00,2012-08-02 06:30:00
2012-09-02 13:00:00,2012-09-02 15:00:00
2012-09-12 00:00:00,2012-09-12 06:00:00
2012-11-06 05:00:00,2012-11-06 16:00:00

Мне требуется добавить прозрачный прямоугольник над каждым диапазоном (start_dt - end_dt) к диаграмме D3, в которой также есть путь к линии с осью X даты и времени.

Я получаю данные из CSV через;

d3.csv("{% static 'historicaldata/csv/bad_data.csv' %}", function(error, data) {
    data.forEach(function(d) {
    d.start_dt = parseDate(d.start_dt);
    d.end_dt = pareseDate(d.end_dt);
});

Как мне создать эти прямоугольники в контексте времени относительно пути к линии, который уже присутствует, и добавить их в мой контейнер SVG?

Я уже определил размеры;

height = 275 - margin.top - margin.bottom;

РЕДАКТИРОВАТЬ:

поиграться с функцией js http://jsfiddle.net/3emn74yr/2/

Answer 1

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

Например, если вы хотите, чтобы ваши риты охватывали всю высоту вашего графика, вы можете сделать это:

svg.selectAll('.time-span-rect')
  .data(data)
  .enter().append('rect')
    .attr('class', 'time-span-rect')
    .attr('x', function(d) { return x(d.start_dt); })
    .attr('y', 0)
    .attr('width', function(d) { return x(d.end_dt) - x(d.start_dt); })
    .attr('height', height);

Затем, если вы хотите, чтобы они были прозрачными, вы можете установить

.attr('fill', 'transparent')

или нацельтесь на класс в вашем css:

.time-span-rect {
  fill: transparent;
}

Вот пример, который вы можете посмотреть, используя свои временные данные и случайный линейный график. Я сделал Х-шкалу d3.time.scale а не линейный масштаб, так как это делает работу с осями немного проще. Вы можете рассмотреть возможность сделать то же самое. Кроме того, я сделал заполнение rects cyan просто так они появляются. Просто измените заполнение CSS на transparent, Надеюсь, это поможет.