D3.JS不能使用.rangeRoundBands（）去除填充

Question

我有一个使用.rangeRoundBands方法的条形图。我试图弄清楚如何摆脱条形外部的填充物，使条形线到达X轴的边缘。

这是我在x轴上使用的x刻度：

xScaleOrdinal = d3.scale.ordinal();

xScaleOrdinal
        .rangeRoundBands([0, width], .1)
        .domain(thedata.map(function(d) { return d.date; }));

这就是图表现在的样子：

Answer 1

.rangeRoundBands()的性质使得它无法保证填充设置，因为它将组舍入到像素坐标。一般来说，如果在一个小区域内展示了很多酒吧，事情会变得很时髦。

您可以通过扩展绘制条形的像素区域来解决此问题，或者只使用rangeBands()代替rangeRoundBands()。

Answer 2

.rangeRoundBands()函数接受第三个参数，该参数指定外部填充（围绕波段填充而不是它们之间的填充）。所以可能值得将其专门设置为0并查看是否能解决您的问题。

您的x轴代码将如下所示

xScaleOrdinal = d3.scale.ordinal();

xScaleOrdinal
        .rangeRoundBands([0, width], 0.1, 0)
        .domain(thedata.map(function(d) { return d.date; }));