javascript - 如何使用交叉过滤器从日期列的 DOW 中获取平均值以填充条形图

Question

我正在 Crossfilter 中使用 dc.js 工作，

我必须在条形图中获取一周中每一天的单位平均值。 我有日期和单位列，我尝试从日期获取 DOW(Dayofweek)，并使用该 DOW 我尝试获取单位的平均值，但不起作用。 我已在此处附加了我的代码，请帮助我。

        d3.csv("LargeCSVFile.txt", function (error, data) {
                var dayOfWeekChart = dc.barChart("#dc2");
                var dateFormat = d3.time.format('%m/%d/%Y');
                var ndx = crossfilter(data);
                var all = ndx.groupAll();

                var dayOfWeek = ndx.dimension(function (d) {
                    var dateval = dateFormat.parse(d.Date);
                    var day = dateval.getDay();                       
                    return day;
                });

                var AVGUnitsDimGroup = dayOfWeek.group().reduce(
                //add
                function (p, v) {
                   ++p.count;

                    p.sum = v.Units;
                    p.avg = p.sum / p.count;
                    return p;
                },
                //remove
                function (p, v) {
                    --p.count;

                    p.sum = v.Units;
                    p.avg = p.sum / p.count;
                    return p;
                },
                //init
                function (p, v) {
                    return {
                        count: 0,                            
                        avg: 0,
                        sum: 0
                    };
                });

                dayOfWeekChart.width(180)
                .height(180)
                .margins({ top: 20, left: 10, right: 10, bottom: 20 })                   
                .dimension(dayOfWeek)
                .group(AVGUnitsDimGroup)
                .x(d3.scale.linear().domain([0.5, 7.5]))
                .label(function (d) {
                    return d.key;
                })
                .title(function (d) {
                    return d.value.avg;
                })                                          
                .elasticX(true)                        
                .xAxis().ticks(4);
                 dc.renderAll();
            })

Answer 1

我自己解决了这个问题，我忘记添加总和值并添加 .valueAccessor(function (p) { 返回 p.value.avg； }) 旁边的组函数使我的代码正常工作。这是我的工作代码。

               d3.csv("LargeCSVFile.txt", function (error, data) {
                var dayOfWeekChart = dc.barChart("#dc2");

                 data.forEach(function (d) {
                    d.dd = new Date(d.Date);
                });

                var ndx = crossfilter(data);
                var all = ndx.groupAll();

                var dayOfWeek = ndx.dimension(function (d) {
                    return d.dd.getDay();
                });

                 var AVGUnitsDimGroup = dayOfWeek.group().reduce(
                //add
                function (p, v) {
                    ++p.count;
                    p.sum += v.Units / 1;
                    p.avg = p.sum / p.count;
                    return p;
                },
                //remove
                function (p, v) {
                    --p.count;
                    p.sum += v.Units / 1;
                    p.avg = p.sum / p.count;
                    return p;
                },
                //init
                function (p, v) {
                    return {
                        count: 0,
                        sum: 0,
                        avg: 0
                    };
                });


                dayOfWeekChart.width(400)
                .height(300)
                .margins({ top: 20, left: 50, right: 10, bottom: 20 })
                .transitionDuration(1500)
                .dimension(fluctuation)
                .group(AVGUnitsDimGroup)
                .valueAccessor(function (p) {
                    return p.value.avg;
                })
                .x(d3.scale.ordinal().domain([1,2,3,4,5,6,7]))
                .xUnits(dc.units.ordinal)
                .title(function (d) {
                    return d.value.avg;
                })
                .xAxisPadding(600)
                .elasticX(true)
                .elasticY(true)
                .xAxis().ticks();

                dc.renderAll();
           })