javascript - 在日期上添加矩形 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

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

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

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而不是线性比例，因为它使轴的使用变得更加简单。您可能想考虑做同样的事情。另外，我将矩形填充为青色，以便它们显示出来。只需将 css 填充更改为透明即可。希望有帮助。