如何在D3折线图中正确添加填充到绘图区域？

Question

我在D3中有一个折线图，如下所示：

我试图将x轴扩展为与y轴刻度宽度相同的尺寸。目前我正在设置范围如下：

// set the ranges
var x = d3.scaleTime().range([20, width - 20]);
var y = d3.scaleLinear().range([height, 0]);

这实现了我想要的效果，即从左侧和右侧推动绘图但不延伸x轴。我确定必须有一种方法可以在不改变范围的情况下为情节添加填充，但我似乎无法弄清楚如何？

Answer 1

没有简单的方法可以将填充添加到线性刻度。

但是，在您的情况下，由于您的x轴正在显示分类数据（一周中的几天），因此您可以使用d3.scalePoint并使用padding function配置其外部填充。