d3.js - 带日期轴的 DC.js 条形图

Question

我想创建一个基于 x 轴日期的条形图。标签应显示为月份(即 Jan、Jan'17 - 首选)。在我的数据中，我总是有接下来几个月的第一个日期，即 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);