问dc-js linechart在过滤其他图表时消失。
EN

Stack Overflow用户

提问于 2015-07-23 23:35:37

回答 1查看 476关注 0票数 1

我是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/

javascript

d3.js

dc.js

crossfilter

回答 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;
    },