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图表，其中alrady包含一个日期时间为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

您只需使用x刻度根据开始日期设置re-x的x坐标，并将宽度设置为结束日期和开始日期的x-scaled值之差。

例如，如果您希望您的rects跨越图表的整个高度，您可以这样做：

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;
}

HERE是您可以使用时间跨度数据和随机线图查看的示例。我已经将x尺度设为d3.time.scale而不是线性尺度，因为它使轴的工作更加简单。您可能想要考虑做同样的事情。此外，我已经让reuts'填充cyan只是出现了。只需将css填充更改为transparent即可。希望有所帮助。

在日期D3上添加矩形

1 个答案: