D3 基于时间的刻度溢出轴答案

【问题标题】：D3 Time based scales overflowing axisD3 基于时间的刻度溢出轴
【发布时间】：2016-10-01 20:52:01
【问题描述】：

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

但是，正如您在小提琴中看到的那样，我有一个问题，即图中的最后一个元素超出了轴的末端。我的意思是我想这是有道理的。但我不确定如何在图表中显示并确保所有元素都适合图表提供的宽度。

我假设我需要修改当前的 x 轴域

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

但除了以某种方式手动添加一个没有数据但后续日期的额外数据点之外，我不确定如何管理它。如果有人可以提供任何指针，将不胜感激！

【问题讨论】：

标签： d3.js

【解决方案1】：

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

var x = d3.scaleBand()
    .range([0, width])
    .padding(0.05);

【讨论】：

【解决方案2】：

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

如果你仔细观察你的小提琴，每个条形图的开始位置正是它应该开始的地方，也就是说，每个条形图的 x 值对应于 x 轴上的时间值。但是条形图是有宽度的，问题就在这里：当您将宽度设置为 18px（或任何其他值）时，条形图会溢出时间刻度。这是正常的，也是意料之中的。

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

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

使用序数比例。条形图不应该使用时间刻度，时间刻度也不应该与条形图一起使用。例如，Bostock 的代码使用序数比例：
```
var x = d3.scale.ordinal()
```

您可以使用scaleOrdinal，或者更好的是scaleBand。

【讨论】：