D3基于时间的比例溢出轴

Question

我一直在制作一个类似的堆积条形图，在这里的示例https://bl.ocks.org/mbostock/1134768中运行d3 v4，如此处的小提琴所示https://jsfiddle.net/z75L7cfz/7/

然而，正如你在小提琴中看到的那样，我有一个问题，即图中的最后一个元素延伸到轴的末端。我的意思是我认为这是有道理的。但我不确定如何在图表中进行此展示，并确保所有元素都符合图形的提供宽度。

我假设我需要修改当前

的x轴域

x.domain(d3.extent(data, function(d) { return d.Date; }));

但除了以某种方式手动添加没有数据的额外数据点，但后续日期我不知道如何管理它。如果有人能提供任何指示，那将非常感激！

Answer 1

对于条形图，最好使用band scale。它计算条形尺寸，位置和填充。

bash -c ...

这是更新的小提琴： https://jsfiddle.net/dtb02eze/2/

Answer 2

实际上，代码本身没有任何问题。这里的问题是时间尺度的概念，以及使用具有这种尺度的条形图。

如果你仔细观察你的小提琴，每个小节就会从它应该开始的确切位置开始，也就是说，每个小节的VBox值对应于x轴的时间值。但是条形有一个宽度，这就是问题所在：当你将宽度设置为18px（或任何其他值）时，条形图将溢出时间刻度。这是正常的和预期的。

时间刻度应该与点一起使用，其中每个点（adimentional）恰好位于时间刻度的正确位置，或者使用直线，这只是连接点的路径。

说了这么多，你有两个选择：

1. 使用序数量表。条形图不应使用时间刻度，并且时间刻度不应与条形图一起使用。例如，Bostock的代码使用了序数：

   x

您可以使用var x = d3.scale.ordinal() 或更好的scaleOrdinal。

1. 如果您想坚持时间刻度，请将图表更改为折线图。从技术上讲，折线图是在一段时间内可视化数据趋势的最佳选择。