Я пытаюсь создать гистограмму, используя dc.js для отображения количества сообщений, агрегированных по месяцам.Я настроил измерение и группу перекрестного фильтра для правильной агрегации данных, но я не могу получить ширину полученной диаграммы, чтобы заполнить правильную ширину по оси X.
Мой (упрощенный) код выглядит следующим образомthis:
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, но столбцы имеют ширину всего 1 пиксель.Диаграмма, о которой идет речь, - это меньшая, нижняя диаграмма. Предполагается, что это диаграмма диапазона для более высокого разрешения (которая объединяет записи по дням и отображается правильно), но это для другого вопроса!
Я получаю лучшие результаты с .xUnits(() => { return overviewGroup.all().length - 1 }), который дает более широкую полосу и ближе к моему намеченному результату, но это все еще не правильно:
Я вытащил свой код в скрипку, но в скрипте он работает более или менее, как и ожидалось: https://jsfiddle.net/y1qby1xc/9/