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})

我已经阅读了post：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);

DC.js 带日期轴的条形图

DC.js bar chart with date axis

d3.js

dc.js

保持条形居中并添加填充

将刻度对齐到条的左侧并更正域的右侧