Question

我在Cross过滤器中工作，我们有客户订单表，在此表中我们有关于订单行的信息，例如商品数量，UOM（每个，案例，托盘等......）

     CustomerOrderid    SKU     Each    Cases  OrderQuantity OrderDate 
     13516              129209  1.2     2      15            01/05/2015
     13516              129210  1       7.5    10            01/12/2015 
     13516              129211  1.3     1.2    2             01/20/2015
     13516              129212  1.2     2.3    4             01/28/2015
     13516              129213  1.6     1.6    6             02/09/2015
     13516              129214  2.4     2.4    8             02/17/2015
     13516              129215  2.1     2.8    11            02/18/2015
     13516              129216  2.2     2.9    7             03/23/2015
     13516              129217  2.3     2.4    1             03/24/2015
     13516              129218  2.4     2.4    4             03/25/2015
     13516              129219  1       1.9    6             03/30/2015
     13516              129220  1.1     2.7    4             04/06/2015
     13516              129221  1.5     2.8    1             04/13/2015
     13516              129222  1.6     2.4    6             04/22/2015
     13516              129223  1       1.5    1             04/28/2015

此表包含历史数据，它包含过去5年的数据。我们需要根据星期几显示每个平均单位和平均单位数的图表。如果用户选择“每个”，那么我们需要显示每个平均值，如果用户选择“案例”，那么我们需要显示案例的平均值。

我们使用D3条形图和Google大查询完成了上述项目。这工作正常。

每次我们只是调用db并根据用户选择获取数据。

预期产出

      DAYOFWEEK     AVG_Units(Cases)    AVG_Units(Each) 
      Monday        3.05714         1.37142
      Tuesday       1.875           1.75
      Wednesday     2.475           1.825

我们已经实现了交叉过滤器，以按年显示图表详细信息。我们只需下载1.05亿个数据文本文件，并将其保存在运行d3图表的本地环境中，然后我们只使用交叉过滤器库在饼图中加载不同的OrderDate年份，如果用户在饼图中单击年份为2015图表，然后报告应显示（每个\个案）的平均值，OrderDate属于2010年。

我已经使用以下代码来实现这一点，如果我们在文本文件中有10L记录它工作正常，如果我们在文件中有105Million记录，那么我的浏览器就会崩溃。请建议解决此问题。

     <script>      

         var j = jQuery.noConflict();
        j(document).ready(function () {

            d3.csv("SmallDB.txt", function (error, data) {
                var dayOfWeekChart = dc.barChart("#Canvas");
                var chart = dc.pieChart("#test");
                var numberFormat = d3.format('.2f');

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



                //Pie chart Start

                    var index = -1;
                    var ndx = crossfilter(data),
                        runDimension = ndx.dimension(function (d) {
                            var a = parseInt(d.Year);
                            return "Year-" + a;
                        });
                    speedSumGroup = runDimension.group().reduceSum(
                        function (d, i) {
                            var b = parseInt(d.Year);
                            return  b;
                        });

                    chart
                      .width(600)
                      .height(300)
                        .transitionDuration(1000)
                      .slicesCap(4)
                      .innerRadius(70)
                      .dimension(runDimension)
                      .group(speedSumGroup)
                      .legend(dc.legend());

                    chart.render();
                    chart.filter = function (d) {
                        OrderDateRange(d);
                    };

                //Pie chart End

                //Bar Chart Start
                    function OrderDateRange(data) {

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

                        var AVGUnitsDimGroup = fluctuation.group().reduce(
                        //add
                        function (p, v) {
                            ++p.count;
                            p.sum += v.Each / 1;
                            p.avg = p.sum / p.count;
                            return p;
                        },
                        //remove
                        function (p, v) {
                            --p.count;
                            p.sum += v.Each / 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(dayOfWeek)
                        .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)

                        dayOfWeekChart.render();

                    }

            })
        })
    </script>

针对大量数据的Crossfilter聚合

0 个答案: