如何使用crossfilter从DOW of Date列中获取Average以填充条形图

时间:2015-07-28 05:35:55

标签: javascript d3.js dc.js crossfilter

我使用dc.js在Crossfilter中工作,

我必须在条形图中获得每周的每一天的单位平均值。 我有日期和单位专栏,我已经尝试从日期获得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();
            })

1 个答案:

答案 0 :(得分:1)

我自己已经解决了,我忘了添加总和值并添加.valueAccessor(function(p){                         return 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();
           })