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

How to get Average from DOW of Date column using crossfilter to populate in bar chart

本文关键字：日期 DOW 平均值 填充 何使用 过滤器 条形图      更新时间：2023-09-26

我在交叉过滤器与dc.js，

我必须在柱状图中得到每周每天的平均单位。我有日期和单位列，我试着从日期得到DOW(星期)，用那个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();
            })

我自己解决了这个问题，我忘记添加和值并添加。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();
           })
相关文章：