dc-js linechart在过滤其他图表时消失。
dc-js linechart在过滤其他图表时消失。
提问于 2015-07-23 23:35:37
我是dc.js的新手，所以我可能遗漏了一些东西，我尝试在三个时间维度上显示时间序列数据:按月、按日、按小时--基本上是为了显示机器(制造)的效率。
所以我为月份和时间做了一个条形图，为白天做了一个直线图。代码如下：
var cfdata = crossfilter(dataArray);
var avgadd = function(p,v) {
p.count++;
p.sum += v.efficiency;
p.avg = p.sum/p.count;
return p;
},
avgremove = function(p,v) {
p.count--;
p.sum -= v.efficiency;
p.avg = p.sum/p.count;
return p;
},
avginit = function(){
return {
count: 0,
sum: 0,
avg: 0
}
};
var parseDate = d3.time.format('%a %b %d %Y %H:%M:%S GMT%Z (UTC)').parse;
dataArray.forEach(function(d) {
d.date = parseDate(d.date);
d.hour = d3.time.hour(d.date).getHours();
d.day = d3.time.day(d.date);
d.month = d3.time.month(d.date);
// d.year = d3.time.year(d.date).getFullYear();
});
// dimensions: efficiency by hour
var hourDim = cfdata.dimension(function(d){return d.hour});
var hourlyEff = hourDim.group().reduce(avgadd, avgremove, avginit);
// dimensions: efficiency by day
var dayDim = cfdata.dimension(function(d){return d.day});
var minDay = dayDim.bottom(1)[0].date;
var maxDay = dayDim.top(1)[0].date;
var dailyEff = dayDim.group().reduce(avgadd, avgremove, avginit);
// dimensions: efficieny by month and year
var monthDim = cfdata.dimension(function(d){return d.month});
var minMonth = monthDim.bottom(1)[0].date;
var maxMonth = monthDim.top(1)[0].date;
var monthlyEff = monthDim.group().reduce(avgadd, avgremove, avginit);
dc.barChart(".month-eff-chart")
.height(180)
.width(900)
.dimension(monthDim)
.group(monthlyEff)
.valueAccessor(function(p){return p.value.avg})
.centerBar(true)
.x(d3.time.scale().domain([minMonth, maxMonth]))
.xUnits(d3.time.months)
.xAxis().ticks(d3.time.month, 1).tickFormat(d3.time.format("%b %y"));
dc.lineChart(".day-eff-chart")
.height(180)
.width(900)
.dimension(dayDim)
.group(dailyEff)
.valueAccessor(function(p){return p.value.avg})
.elasticX(true)
.x(d3.time.scale())
.xUnits(d3.time.days)
.xAxis().ticks(d3.time.week, 1).tickFormat(d3.time.format("%W/%y"));
dc.barChart(".hour-eff-chart")
.height(180)
.width(900)
.dimension(hourDim)
.group(hourlyEff)
.valueAccessor(function(p){return p.value.avg})
.x(d3.scale.linear().domain([0,23]));
dc.renderAll();所以当我打开页面并在任何一个条形图上进行过滤时，其他条形图会过滤得很好，但是直线图会变得空荡荡的--线条将完全消失。当我把线条图改成条形图时，它就能工作了--过滤器很好。
我一定是漏掉了什么。
此外，关于如何以更有意义的方式显示时间序列数据的建议也受到欢迎。谢谢!
编辑: JsFiddle：http://jsfiddle.net/shuzf2vm/2/
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-28 11:59:14
这不起作用的原因是，当计数为零时，平均值将产生NaNs。你需要像这样保护你的部门：
var avgadd = function(p,v) {
p.count++;
p.sum += v.efficiency;
p.avg = p.count ? p.sum/p.count : 0;
return p;
},
avgremove = function(p,v) {
p.count--;
p.sum -= v.efficiency;
p.avg = p.count ? p.sum/p.count : 0;
return p;
},工作叉：http://jsfiddle.net/gordonwoodhull/hsqa43uk/3/
它对条形图和线条图的行为不同的原因是有趣的。两者都保护输出到绘图函数和检测NaNs。但是条形图单独地保护每个条形图，而线条图输出一个多段线，如果任何点是坏的，则抛出整条线。
(如果有人想申请公关，在这里使用d3.svg.line.defined可能会更有帮助。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31604727
复制相关文章
相似问题
腾讯云开发者
