d3.js - 将条形图条形宽度设置为月间隔

Question

我正在尝试使用 dc.js 创建一个直方图，以显示按月汇总的帖子计数。我已经设置了交叉过滤器维度和组以正确聚合数据，但我无法获得结果图表的宽度来填充 x 轴上的正确宽度。

我的（简化的）代码如下所示：

var ndx = crossfilter(items)
var dateDimension = ndx.dimension(d => d.date)
// group by month
var overviewGroup = dateDimension.group(d => {
    if (d) {
        return new Date(d.getUTCFullYear(), d.getUTCMonth())
    }
})


var minMonth = new Date(dateDimension.bottom(1)[0].date.getUTCFullYear(), dateDimension.bottom(1)[0].date.getUTCMonth())
var maxMonth = new Date(dateDimension.top(1)[0].date.getUTCFullYear(), dateDimension.top(1)[0].date.getUTCMonth() + 1)

this.overviewChart
    .height(60)
    .minWidth(600)
    .width(null)
    .margins({top: 0, right: 10, bottom: 30, left: 40})
    .dimension(dateDimension)
    .centerBar(false)
    .x(scale.scaleTime().domain([minMonth, maxMonth]))
    .round(time.timeMonths.round)
    .xUnits(time.timeMonths)
    .group(overviewGroup)
    .on('filtered', () => { this.displayItems = ndx.allFiltered() })

这会在 y 轴上显示正确的数据，但条形图只有 1px 宽。有问题的图表是更小、更低的图表——它应该是上面更高分辨率的范围图（它按天汇总帖子并正确显示），但这是另一个问题！

我得到了更好的结果.xUnits(() => { return overviewGroup.all().length - 1 })，产生了更宽的条形，更接近我的预期结果，但它仍然不正确：

我已经将我的代码拉到了小提琴中，但是在小提琴中它或多或少地按预期工作：https ://jsfiddle.net/y1qby1xc/9/

标签： d3.jsdc.jscrossfilter