DC.js Reductio - 显示日期范围DC内的累积平均值

我正在尝试继续构建一个棒球统计仪表板，似乎又一次撞墙了 .

我有一系列代表游戏统计数据的记录，并希望生成一个条形图，其中包含一个条形图，表示页面第一个图表中所选日期范围的击球平均值 .

我收到了关于创建第一个图表的帮助，该图表显示了所选日期范围的累计命中总数 . 方法是使用regularize_groupAll函数更改groupAll函数以响应all（）函数调用而不是.value（） .

方法1：

当尝试使用相同的方法时，我将图表/组配置为计算每天总平均值的总贡献（在此示例中，有三个游戏，其中每天的击球手的平均值为.500但到期对于命中和绝对中的不同总数，每个游戏对累积平均值贡献不同的量 . 这不是所希望的，因为我希望图表显示所选时间段的实际平均值（如果选择一个游戏，我希望图表显示.500，两个游戏相同，所有三个相同，因为所有三个累计平均值可能的日期组合是.500） .

var avgChart = dc.barChart("#avg-chart");

function avg(totalAbs, dim) {
  return dim.groupAll().reduceSum(function(d) {
  return (d.h / d.ab) * (d.ab / totalAbs);
 });
}

var totalAbs = abDim.groupAll().reduceSum(function(d){ return d.ab }).value();
var totalAvg = avg(totalAbs, abDim);

var regTotalAvg = regularize_groupAll(totalAvg);
avgChart
 .width(200)
 .height(HEIGHT + 30)
 .x(d3.scale.ordinal().domain(["Avg"]))
 .xUnits(dc.units.ordinal)
 .y(d3.scale.linear().domain([0, totalAvg.value()]))
 .yAxisLabel("")
 .centerBar(true)
 .dimension(abDim)
 .brushOn(false)
 .alwaysUseRounding(true)
 .group(regTotalAvg);

 avgChart.render();

方法2：

在查看Reductio的文档后，我想我可以使用.groupAll（groupingFunction） . 部分解决问题的方法是使用该功能使当前日期计算中包含的所有先前日期的游戏 . 我能够使用.sum（d.h）函数获得正确的命中数，但我目前无法将计数修改为正确的数字（d.ab） .

groupAll = dateDim.groupAll();
var dateArray = [new Date( 2016,3,4) ,new Date( 2016,3,5) ,new Date( 2016,3,6)];

reducer = reductio()
  .groupAll(function(record) {
    var datesToInclude = new Array();
    for(i = record.index; i < dateArray.length; i++) {
      datesToInclude.push(dateArray[i]);
    }
   return datesToInclude;
  })
  .count(true)
  .sum(function(d){ return d.h });

reducer(groupAll);
console.log(groupAll.value());

方法3：

方法3是尝试创建自定义reduce函数并将它们提供给groupAll（） . reduce（reduceAdd，reduceRemove，reduceInitial）函数 . 这种尝试最初没有产生图表 . 添加.valueAccessor后（函数（p）{return p.value.count> 0？p.value.total / p.value.count：0}）;调用函数的末尾绘制总平均值，但在设置断点后，我发现在移动画笔以过滤日期后，从未调用reduceRemove函数 .

var avgChart = dc.barChart("#avg-chart")

function reduceAdd(p, v) {
  p.count += v.ab;
  p.total += v.h;
  return p;
}

function reduceRemove(p, v) {
 p.count -= v.ab;
 p.toal -= v.h;
 return p;
}

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

var allAvg = dateDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial);
var totalAvg = allAvg.value()
console.log("Total avg total hit count" + totalAvg.total)
console.log("Total avg count ab count" + totalAvg.count)
var regTotalAvg = regularize_groupAll(allAvg);

avgChart
 .width(200)
 .height(HEIGHT + 30)
 .x(d3.scale.ordinal().domain(["Avg"]))
 .xUnits(dc.units.ordinal)
 .y(d3.scale.linear().domain([0, totalAvg.total / totalAvg.count]))
 .yAxisLabel("")
 .centerBar(true)
 .dimension(dateDim)
 .brushOn(false)
 .alwaysUseRounding(true)
 .group(regTotalAvg)
 .valueAccessor(function(p) {
  return p.value.count > 0 ? p.value.total / p.value.count : 0
 });

 avgChart.render();

JSFiddle：https://jsfiddle.net/schins02/acchgsfL/

任何帮助将不胜感激，我希望这可以帮助我克服困难，并能够自己解决这种性质的问题 .