我正在尝试使用dc.js创建日期堆积面积图。该图表应该:
- 按每个字段“事件”显示不同区域
- 计算每天的事件数量
这是我的代码:
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/
最佳答案
dc.js 的堆栈功能要求每个堆栈都有一个对应于每个 X 值的值。由于某些区域目前未定义
,您最终会得到 NaN
,然后 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;
}, {});
});
关于javascript - 使用 dc.js 的日期堆积面积图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48645771/