使用 dc.js 的日期堆积面积图

Question

我正在尝试使用 dc.js 创建日期堆积面积图。该图表应：

1. 按每个字段“事件”显示不同的区域
2. 统计每天的事件数

这是我的代码：

var data = [{
  "event": "Panic",
  "date": "2018-01-02"
}, {
  "event": "Speed limit exceeded",
  "date": "2018-01-01"
}, {
  "event": "Door opened",
  "date": "2018-01-03"
}];

var chart = dc.lineChart("#areaChart");
var dtgFormat = d3.time.format("%Y-%m-%d");

data.forEach(function(d) {
  d.dtg = dtgFormat.parse(d.date);
});

var ndx = crossfilter(data);
var areaDim = ndx.dimension(function(d) {
  return d.dtg;
});
var areaGroup = areaDim.group().reduce(
  function(p, v) {
    p[v.event] = (p[v.event] || 0) + 1;
    return p;
  },
  function(p, v) {
    p[v.event] = (p[v.event] || 0) - 1;
    return p;
  },
  function() {
    return {};
  });

// Get distinct
var eventsArray = data.map(a => a.event).filter(function onlyUnique(value, index, self) {
  return self.indexOf(value) === index;
});

function sel_stack(i) {
  return function(d) {
    return d.value[i];
  };
}

chart.width(960)
  .height(150)
  .transitionDuration(500)
  .dimension(areaDim)
  .group(areaGroup, eventsArray[0], sel_stack(eventsArray[0]))
  .renderArea(true)
  .elasticY(true)
  .x(d3.time.scale().domain(d3.extent(data, function(d) {
    return d.dtg;
  })))
  .xAxis().ticks(4);

for (var i = 1; i < eventsArray.length; i++)
  chart.stack(areaGroup, eventsArray[i], sel_stack(eventsArray[i]));

dc.renderAll();

但图表只绘制了两个轴。我错过了什么？

这是我的 jsfiddle：http://jsfiddle.net/n08e32n6/12/

Answer 1

dc.js 的堆栈特性要求每个堆栈对每个 X 值都有一个值。由于目前有些是undefined，因此您最终会得到NaNs，然后dc.js 会完全清理这些区域。

你需要做的就是用所有可用的键来初始化你的 reduce 对象，而不是从一个空白对象开始。因此，您可以先计算不同的事件类型，然后使用 Array.reduce 为每种事件类型创建一个带有零的对象：

var eventsArray = data.map(a => a.event).filter(function onlyUnique(value, index, self) {
  return self.indexOf(value) === index;
});

var areaGroup = areaDim.group().reduce(
  function(p, v) {
    p[v.event] = (p[v.event] || 0) + 1;
    return p;
  },
  function(p, v) {
    p[v.event] = (p[v.event] || 0) - 1;
    return p;
  },
  function() {
    return eventsArray.reduce(function(p, v) {
      p[v] = 0;
      return p;
    }, {});
  });

Fork of your fiddle.