如何正确使用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} 
] 

什么是使用reduceSum我resolverDim，得到这个工作的正确方法？

Answer 1

事实证明，使用减少的地方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; 
      });