在Crossfilter与DC.js中如何展示fdl_UniyPrice的平均值图表？

我帮你排查了代码里的问题，核心原因是reductio没有直接提供平均值的聚合方法，你需要通过跟踪总和与计数来手动计算平均值，下面是具体的修复步骤和代码：

1. 正确配置reductio的聚合规则 #

reductio本身没有内置的平均值聚合，所以我们需要同时计算价格的总和和数据条数，之后用总和除以条数得到平均值：

// 为日期-单价图表创建reducer，跟踪总和和计数
var datePriceReducer = reductio()
  .sum(function(d) { return d.fdl_UniyPrice; }) // 计算单价总和
  .count(true); // 统计每组的数据条数

2. 修正图表的valueAccessor #

在图表配置中，需要通过valueAccessor来计算并返回平均值，同时要处理数据条数为0的情况，避免出现NaN导致图表无法渲染：

// 配置dateUnitPriceChart
var dateUnitPriceChart = dc.lineChart("#date-unit-price-chart")
  .width(800)
  .height(300)
  .margins({top: 20, right: 50, bottom: 30, left: 50})
  .dimension(dateDimension)
  .group(dateGroup, 'Average Unit Price')
  .valueAccessor(function(d) {
    // 计算平均值，count为0时返回0避免NaN
    return d.value.count > 0 ? d.value.sum / d.value.count : 0;
  })
  .x(d3.scaleTime().domain(d3.extent(data, function(d) { return d.fdl_Date; })))
  .xAxisLabel('Date')
  .yAxisLabel('Average Unit Price')
  .renderHorizontalGridLines(true)
  .renderVerticalGridLines(true)
  .elasticY(true);

3. 确保分组数据正确关联reducer #

最后要记得把reducer应用到分组后的数据集上：

var dateGroup = d3.group(data, function(d) { return d.fdl_Date; });
datePriceReducer(dateGroup); // 将reducer规则应用到分组数据

这样修改后，dateUnitPriceChart就能正确计算并显示每日的平均单价了。

内容的提问来源于stack exchange，提问作者MBehtemam