D3.js 带日期轴的DC.js条形图

我想创建一个基于x轴日期的条形图。标签应显示为月份（即1月、1月17日-首选）。在我的数据中，我始终有以下月份的第一个日期，即1月1日、2月1日、3月1日。我已经创建了一个图表，但无法使其对齐

var chart   = dc.barChart("#" + el.id);
var chCategory = ndx.dimension(function(d) {return d[chCategoryName];});
chValues = chCategory.group().reduceSum(
   return parseFloat(d[chValueName]);});


//set range for x-axis
var minDate = chCategory.bottom(1)[0][chCategoryName];
var maxDate = chCategory.top(1)[0][chCategoryName];
chart
  .width(800)
  .height(200)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months)
  .dimension(chCategory)
  .group(chValues)

  .renderHorizontalGridLines(true)
// .centerBar(true) //does not look better
   .controlsUseVisibility(true)
   .ordinalColors(arrColors) 
   .transitionDuration(1000)
   .margins({top: 10, left: 80, right: 5, bottom: 20})

我已经读过这篇文章：

---

但我无法以一种能够在不同年份保持正确排序的方式来实现它。

dc.js从字面上看这个域——x轴从开始一直延伸到结束，而不考虑条的宽度或它们的位置。这是一个设计缺陷

这里有两个解决办法

保持条居中并添加填充 如果您正在使用，可以手动更正，如下所示：

chart.centerBar(true)
    .xAxisPadding(15).xAxisPaddingUnit('day')

如果您只是手动设置域，那么

minDate = d3.time.day.offset(minDate, -15);
maxDate = d3.time.day.offset(maxDate, 15);

将记号与条形图的左侧对齐，并更正域的右侧 你不会说当你不把这些杆放在中心的时候你会遇到什么问题

如果您想要

elasticX

效果，可以像这样手动实现，将右侧偏移一个月（）：

或者不带elasticX，这只是：

maxDate = d3.time.month.offset(maxDate, 1);

maxDate = d3.time.month.offset(maxDate, 1);