将条形图条宽度设置为月间隔

时间:2018-05-23 08:58:17

标签: d3.js dc.js crossfilter

我正在尝试使用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。有问题的图表是较小的较低图表 - 它应该是上面较高分辨率图表的范围图表(按日汇总帖子并正确显示)但这是另一个问题!

Chart with tiny bars

我使用.xUnits(() => { return overviewGroup.all().length - 1 })获得了更好的结果,这会产生更宽的条形并且更接近我的预期结果,但它仍然不正确:

looks better but still not right

我把我的代码拉成了小提琴,但是在小提琴中它或多或少地按预期工作:https://jsfiddle.net/y1qby1xc/9/

0 个答案:

没有答案