带日期轴的 DC.js 条形图答案

【问题标题】：DC.js bar chart with date axis带日期轴的 DC.js 条形图
【发布时间】：2017-01-26 09:36:36
【问题描述】：

我想创建一个基于 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 但我无法以在不同年份保持正确排序的方式实现它。

【问题讨论】：

标签： d3.js dc.js

【解决方案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);

【讨论】：