javascript - 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 月 2 日、7 日和 12 日之后的非间隙。)问题是我看不到使用 d3.time.scale() 指定矩形宽度的方法。 .

解决方法是在后端为该期间的每一天生成零高度矩形。这不是那可怕的，但我觉得我应该能够做得更好。此外，我会失去像 .ticks(d3.time.weeks, 1) 这样的细节。并且必须自己旋转它们。

有什么建议吗？

Answer 1

最后，我找到的最简单的解决方案是使用序数标度并为范围内的每个日期提供(有时为空)元素。