D3，x轴上的日期，数据是日期的宽度 [英] D3, dates on the x axis, data the width of a date

问题描述

我按日期显示数据。我想要的东西有点像这样：

I am visualizing data by date. I want something a bit like this:

关键是我要绘制的矩形是宽度的天。下面是我如何绘制矩形：

The point is that I want to draw rectangles that are the width of the days. Here's how I draw rectangles:

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， p>

The problem is that in order to get the right width, I ended up declaring my x_scale thus

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

。问题是，我没有看到一个方法来指定矩形宽度使用 d3.time.scale（）。

解决方法是在期间的每一天在后端生成零高度矩形。这不是可怕的，但我觉得我应该能够做得更好。此外，我会失去诸如 .ticks（d3.time.weeks，1）等细节，并自己旋转。

A work-around is to generate zero-height rectangles on the back end for every day in the period. This isn't that hideous, but I feel I should be able to do better. In addition, I'd lose niceties like .ticks(d3.time.weeks, 1) and have to spin them myself.

任何指针？

推荐答案

最后，我发现的最简单的解决方案是使用顺序量表（有时为空）元素。

In the end, the simplest solution I found was to use an ordinal scale and provide (sometimes empty) elements for each date in the range.

这篇关于D3，x轴上的日期，数据是日期的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！