如何正确使用crossfilter的reduceSum函数

Question

这是我的小提琴：https://jsfiddle.net/eugene_goldberg/LL41xxho/21/

我有以下数据数组：

var data = [
        {date: "12/27/2012", resolver: "Group 1", volume: 15, escalation: 90, bubble: 5},
        {date: "12/28/2012", resolver: "Group 1", volume: 20, escalation: 10,  bubble: 5},
        {date: "12/29/2012", resolver: "Group 1", volume: 95, escalation: 20, bubble: 10},
        {date: "12/30/2012", resolver: "Group 2", volume: 25, escalation: 30,  bubble: 1},
        {date: "12/31/2012", resolver: "Group 2", volume: 75, escalation: 10,  bubble: 1},
        {date: "01/01/2013", resolver: "Group 2", volume: 44, escalation: 80,  bubble: 1},
        {date: "01/02/2013", resolver: "Group 3", volume: 30, escalation: 10,  bubble: 1},
        {date: "01/03/2013", resolver: "Group 3", volume: 72, escalation: 50,  bubble: 1},
        {date: "01/04/2013", resolver: "Group 3", volume: 51, escalation: 30,  bubble: 1},
        {date: "01/05/2013", resolver: "Group 4", volume: 40, escalation: 10,  bubble: 1},
        {date: "01/06/2013", resolver: "Group 4", volume: 20, escalation: 20, bubble: 1},
        {date: "01/07/2013", resolver: "Group 4", volume: 48, escalation: 10, bubble: 5}
    ];

对于我的dc.js图表，我需要为每个“解析器”提供一个总的“体积”。

我设置了以下维度和组：

var ndx = crossfilter(data);

var resolverDim = ndx.dimension(function(d) { return d.resolver; });

var resolverGroup = resolverDim.group().reduceSum(
            function(p,v) {
                ++p.volume;
                p.resolver = v.resolver;  //This is where the error occurs
                p.bubble = v.bubble;
                p.escalation = v.escalation;
                return p;
            },
            function(p, v) {
                --p.volume;
                p.bubble = 0;
                p.resolver = "";
                p.escalation = 0;

                return p;
            }, function() {
                return { count: 0, volume: 0, escalation:0, resolver: "" };
            }
    );

在这里，我设置了我的气泡图，为每个“解析器”显示单个气泡，并让Y轴反映升级的百分比，X轴反映每个“解析器”的总成交量：

var bubbleChart  = dc.bubbleChart("#bubble-chart");
    //debugger;
    bubbleChart
            .dimension(resolverDim)
            .group(resolverGroup)
            .x(d3.scale.linear().domain(xRange))
            .y(d3.scale.linear().domain(yRange))

            .width(400)
            .height(400)
            .yAxisPadding(50)
            .xAxisPadding(50)
            .xAxisLabel('Incident Volume') // (optional) render an axis label below the x axis
            .yAxisLabel('% Escalation') // (optional) render a vertical axis lable left of the y axis
            .label(function (p) {
                return p.value.resolver;
            })
            .renderLabel(true)
            .title(function (p) {

                return [
                    "Incident Volume: " + p.value.volume,
                    "% Escalation: " + p.value.escalation,
                    "Resolver: " + p.value.resolver
                ]
                        .join("\n");
            })
            .renderTitle(true)
            .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
            .renderVerticalGridLines(true)
            .maxBubbleRelativeSize(0.3)
            .keyAccessor(function (p) {

                return p.value.volume;
            })
            .valueAccessor(function (p) {
                return p.value.escalation;
            })
            .radiusValueAccessor(function (p) {
                return p.value.bubble;
            });

我得到了一个错误："Uncaught TypeError: Cannot read property 'resolver' of undefined"，它是由以下代码行触发的：p.resolver = v.resolver;

当我单独运行这个reduceSum时，我得到了正确的分组和求和：

var volumeByResolver = resolverDim.group().reduceSum(function(d) {return d.volume;})；这将产生以下结果：

volumeByResolver(4) = [
    {"key":"Group 3","value":153},
    {"key":"Group 2","value":144},
    {"key":"Group 1","value":130},
    {"key":"Group 4","value":108}
]

在我的resolverDim上使用reduceSum的正确方式是什么？

Answer 1

事实证明，使用reduce代替reduceSum帮助解决了这个问题：

 var resolverGroup = resolverDim.group().reduce(
            //add
            function (p, v) {
                ++p.volume;
                p.resolver = v.resolver;
                p.bubble = v.bubble;
                p.volume = v.volume;
                p.escalation = v.escalation;
                p.volume_sum += v.volume;

                return p;
            },
            //remove
            function (p, v) {
                --p.volume;
                p.resolver = v.resolver;
                p.bubble = v.bubble;
                p.volume = v.volume;
                p.escalation = v.escalation;
                p.volume_sum -= v.volume;
                return p;
            },
            //init
            function (p, v) {
                return {volume: 0, volume_sum: 0};
            }

这一行：p.volume_sum += v.volume;帮助累积每个组的总成交量，这是随后在我的dc.js气泡图中使用的：

var bubbleChart  = dc.bubbleChart("#bubble-chart");

    bubbleChart
            .dimension(resolverDim)
            .group(resolverGroup)
            .x(d3.scale.linear().domain(xRange))
            .y(d3.scale.linear().domain(yRange))

            .width(400)
            .height(400)
            .yAxisPadding(50)
            .xAxisPadding(50)
            .xAxisLabel('Incident Volume')
            .yAxisLabel('% Escalation')
            .label(function (p) {
                return p.value.resolver;
            })
            .renderLabel(true)
            .title(function (p) {

                return [
                    "Resolver: " + p.value.resolver,
                    "Incident Volume: " + p.value.volume_sum,
                    "% Escalation: " + p.value.escalation

                ]
                        .join("\n");
            })
            .renderTitle(true)
            .renderHorizontalGridLines(true) // (optional) render horizontal grid lines, :default=false
            .renderVerticalGridLines(true)
            .maxBubbleRelativeSize(0.3)
            .keyAccessor(function (p) {
                //console.log('p.volume_sum:  ' + p.value.volume_sum);
                return p.value.volume_sum;
            })
            .valueAccessor(function (p) {
                return p.value.escalation;
            })
            .radiusValueAccessor(function (p) {
                return p.value.bubble;
            });