带日期轴的DC.js条形图

Question

我想基于x轴的日期创建条形图。标签应显示为月份（即2017年1月1日 - 首选）。在我的数据中，我总是在下个月的第一个日期，即01Jan，01Feb，01Mar。我创建了一个图表，但我无法使其对齐。

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-axis will not display ticks as months, shows decimals instead 但我无法以不同年份保持正确排序的方式实施它。

Answer 1

dc.js非常简洁地采用了这个域 - x轴从开始到结束都是精确拉伸的，忽略了条形的宽度或它们的位置。这是一个设计错误。

以下是两个解决方法。

保持栏中心并添加填充

如果您正在使用elasticX，则可以手动更正：

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

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

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

将标记对齐到条形图的左侧并更正域的右侧

你不会说出当你不让酒吧居中时遇到什么问题。 But I know the right bar can get clipped.

如果您想要elasticX效果，可以像这样手动实现，将右侧偏移一个月（example）：

function calc_domain(chart) {
    var min = d3.min(chart.group().all(), function(kv) { return kv.key; }),
        max = d3.max(chart.group().all(), function(kv) { return kv.key; });
    max = d3.time.month.offset(max, 1);
    chart.x().domain([min, max]);
}
chart.on('preRender', calc_domain);
chart.on('preRedraw', calc_domain);

或者没有elasticX只是：

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