Question

我是dc.js的新手，所以我可能错过了一些东西，我有时间序列数据，我试图在3个时间维度上显示：按月，按天和按小时 - 基本上显示机器（制造）跨时间的效率。

所以我制作了几个月和几小时的条形图，以及日期的线图。代码如下：

            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/

Answer 1

这不起作用的原因是当计数为零时，您的平均值将产生NaN。你需要像这样保护你的分歧：

    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/

条形图与折线图表现不同的原因很有趣。两者都保护输出到绘图功能并检测NaN。但是条形图单独保护每个条形图，而折线图输出单个多段线条，如果任何点不好则抛出整条线。

（如果有人关心提交公关，在这里使用d3.svg.line.defined可能会更有帮助。）

在过滤其他图表时，dc-js折线图消失

1 个答案: