D3.js 不显示月平均线图_D3.js_Dc.js_Crossfilter

D3.js 不显示月平均线图

d3.js

D3.js 不显示月平均线图,d3.js,dc.js,crossfilter,D3.js,Dc.js,Crossfilter,我已经使用维度图表javascript库dc.js创建了一个显示平均值的折线图。我正在显示行图、折线图和条形图当我选择一个类别时，将显示年度平均折线图和月度平均折线图。但当我选择一个特定年份和一个类别时，时间-月份平均线图不会显示 skuRowChart = dc.rowChart("#chart-row-spenders"); yearPieChart = dc.pieChart("#chart-pie-year"); yearLineChart = dc.lineChar

我已经使用维度图表javascript库dc.js创建了一个显示平均值的折线图。我正在显示行图、折线图和条形图

当我选择一个类别时，将显示年度平均折线图和月度平均折线图。但当我选择一个特定年份和一个类别时，时间-月份平均线图不会显示

skuRowChart = dc.rowChart("#chart-row-spenders");
     yearPieChart = dc.pieChart("#chart-pie-year");
    yearLineChart = dc.lineChart('#Yearly-move-chart');        
    spendHistChart22 = dc.barChart("#chart-hist-spend22");
    moveChart1 = dc.lineChart('#monthly-move-chart1');        
        function reduceAdd(p, v) {
                ++p.count;
                p.total += v.sr;
                p.average = p.total / p.count
                return p;
            }

            function reduceRemove(p, v) {
                --p.count;
                p.total -= v.sr;
                p.average = p.total / p.count
                return p;
            }

            function reduceInitial() {
                return {count: 0, total: 0, average: 0};
            }

          var parseDate = d3.time.format("%m/%d/%Y").parse;
            var yearFormat = d3.time.format('%Y');
            var monthFormat = d3.time.format("%m");
            //var monthNameFormat = d3.time.format("%b");
            var monthNameFormat = d3.time.format('%m.%b');

            var 

spendData = [ 
{ct:'KF', kw:'Amazon', sr: '35978',sd:'12/29/2016'},
{ct:'KF', kw:'Amazon', sr: '32178',sd:'11/2/2016'},
{ct:'KF', kw:'Amazon', sr: '30978',sd:'1/2/2017'},
{ct:'KF', kw:'Amazon', sr: '28978',sd:'1/15/2017'}, 
{ct:'KF',kw:'Build',sr:'28343',sd:'12/29/2016'},
{ct:'KF',kw:'Build',sr:'29653',sd:'11/29/2016'},
{ct:'KF',kw:'Build',sr:'26343',sd:'10/29/2016'},
{ct:'KF',kw:'Build',sr:'28343',sd:'2/2/2017'},
{ct:'KF',kw:'Build',sr:'28343',sd:'3/26/2017'},
{ct:'KF',kw:'Homedepot',sr:'221206',sd:'12/29/2016'},
{ct:'KF',kw:'Homedepot',sr:'203206',sd:'11/27/2016'},
{ct:'KF',kw:'Homedepot',sr:'193206',sd:'10/2/2016'},
{ct:'KF',kw:'wayfair',sr:'77794',sd:'12/29/2016'},
{ct:'KF',kw:'wayfair',sr:'71794',sd:'11/9/2016'},
{ct:'KF',kw:'wayfair',sr:'70794',sd:'1/9/2017'},
{ct:'KF',kw:'wayfair',sr:'74794',sd:'2/19/2017'},
{ct:'KF',kw:'wayfair',sr:'74794',sd:'3/21/2017'},
{ct:'KF',kw:'Houzz',sr:'408684',sd:'12/29/2016'},
{ct:'KF',kw:'Houzz',sr:'42684',sd:'11/22/2016'},
{ct:'KF',kw:'Houzz',sr:'46684',sd:'10/2/2016'},
{ct:'KF',kw:'Houzz',sr:'496684',sd:'1/2/2017'},
{ct:'KF',kw:'Houzz',sr:'49684',sd:'2/2/2017'},
{ct:'KF',kw:'Houzz',sr:'49664',sd:'3/2/2017'},
{ct:'KF',kw:'express',sr:'32004',sd:'12/29/2016'},
{ct:'KF',kw:'express',sr:'30004',sd:'11/2/2016'},
{ct:'KF',kw:'express',sr:'35004',sd:'10/2/2016'},
{ct:'KF',kw:'express',sr:'35004',sd:'12/2/2016'},
{ct:'KF',kw:'yahoo',sr:'115618',sd:'12/29/2016'},
{ct:'KF',kw:'yahoo',sr:'12546',sd:'10/2/2016'},
{ct:'KF',kw:'yahoo',sr:'65423',sd:'11/29/2016'},
{ct:'KF',kw:'yahoo',sr:'25698',sd:'10/29/2016'},
{ct:'KF',kw:'google',sr:'404991',sd:'1/29/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'2/2/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'3/12/2017'},
{ct:'KF',kw:'google',sr:'404991',sd:'3/3/2017'},
{ct:'KF',kw:'pingserach',sr:'273944',sd:'12/29/2016'}
];
     // d3.csv("hhh.csv", function (error, salesrank) { 
         spendData.forEach(function (d) {
                     d.sr = +d.sr;
                    d.Date = parseDate(d.sd);
                    d.Year = yearFormat(d.Date);
                   d.Month = monthNameFormat(d.Date);
                });
         var ndx = crossfilter(spendData);
         var all = ndx.groupAll();
        SkuDim = ndx.dimension(function (d) {return d.kw; });
        spendPerSku = SkuDim.group().reduceCount();
        yearDim = ndx.dimension(function (d) {return d.Year; });
        year_total = yearDim.group().reduceCount(function (d) {return d.sr;});
        exptAvgGroup = yearDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
        monthDim = ndx.dimension(function (d) {return d.Month; });
        exptAvgGroup11 = monthDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
        month_total = monthDim.group().reduceCount(function (d) { return d.sr;});            

        skuRowChart
            .width(350)
            .height(300)
            .dimension(SkuDim)
            .group(spendPerSku)
            .elasticX(true)
            .x(d3.scale.linear().domain([6, 20]))
            .ordering(function (d) {
                return -d.value
            })
           // .cap(40)
            //.margins({top: -30, left: 0, right: 0, bottom: 0})
            .controlsUseVisibility(true);
        skuRowChart.data(function (group) {
            return group.top(50);
        });



        yearPieChart
            .width(250).height(250)
            .dimension(yearDim)
            .group(year_total)
            .innerRadius(60)
            .controlsUseVisibility(true);



        yearLineChart
            .width(380)
            .height(280)
            .x(d3.scale.ordinal())
            .xUnits(dc.units.ordinal)
            .renderHorizontalGridLines(true)
            .renderVerticalGridLines(true)
            .renderArea(true)
            .valueAccessor(function (p) {
                            //console.log("p.value.average: ", p.value.average) //displays the avg fine
                            return d3.round(p.value.average, 0);
                        })
            //.brushOn(true)
            .elasticY(true)
            .xAxisLabel('Years')
            .yAxisLabel('Review Count')
            //.dimension(moveMonths)
            .dimension(yearDim)
            .group(exptAvgGroup)
            //.margins({ top: 10, left: 60, right:40, bottom: 60 }) 
            .margins({top: 0, left: 60, right: 30, bottom: 60})


            spendHistChart22
                .width(400).height(280)
                .dimension(monthDim)
                //.dimension(dateeddim)
               // .group(dateeddimGroup)
                .group(month_total)
               .xAxisLabel('Months')
                .yAxisLabel('')
                .x(d3.scale.ordinal())
                .xUnits(dc.units.ordinal)
                 .ordering(function(d) { return d.key })
                .elasticX(true)

                .elasticY(true)
                .margins({ top: 10, left: 60, right: 40, bottom: 60 }) 

                .controlsUseVisibility(true)
                spendHistChart22.xAxis().tickFormat(d => d.substr(3))




        moveChart1
        .width(380)
        .height(310)
        //.x(d3.scale.ordinal().domain(map(function (d) {return d.Month;})))
        .x(d3.scale.ordinal())
        .xUnits(dc.units.ordinal)
        .valueAccessor(function (p) {
                            //console.log("p.value.average: ", p.value.average) //displays the avg fine
                            return d3.round(p.value.average, 0);
                        })
        .renderHorizontalGridLines(true)
        .renderVerticalGridLines(true)
        .renderArea(true)
        //.clipPadding(10)
        //.brushOn(false)
        .elasticY(true)
        .xAxisLabel('Months')
        .yAxisLabel('')
        .dimension(monthDim)
        .group(exptAvgGroup11)

        .margins({top: 40, left: 60, right: 30, bottom: 60})
        moveChart1.xAxis().tickFormat(d => d.substr(3))




        dc.renderAll();

当你被可能为零的东西除时，你必须小心

js不会对数据进行太多的清理，因此当您看到一个空白图表时，它可能是坏数据

在没有调试任何东西的情况下，我尝试修复了第一个突出的问题，即不检查

p.count

是否为零的除以

p.count

当计数为零时，您可能希望您的平均值降至零。（从技术上讲，我想这条线应该会有差距，但除非你感兴趣，否则我不会进入这个领域。）

这似乎解决了问题：

            function reduceAdd(p, v) {
                ++p.count;
                p.total += v.sr;
                p.average = p.count ? p.total / p.count : 0;
                return p;
            }

            function reduceRemove(p, v) {
                --p.count;
                p.total -= v.sr;
                p.average = p.count ? p.total / p.count : 0;
                return p;
            }

你的小提琴叉子：

请您指出您得到错误代码的示例，这样我就可以更正它或留下评论了吗？

当您被可能为零的值除时，您必须小心