如何同时显示总和和计数答案

【问题标题】：How to display both sum and count如何同时显示总和和计数
【发布时间】：2019-04-13 10:45:25
【问题描述】：

使用 crossfilter api 我创建了一个维度和一个组。我想在直流复合图中显示每组的计数和每组的总和。但在左右 y 轴上，它只显示 sum 。

 var data = [
             {"class" : 'class I' , "donation": 400},
             {"class" : 'Class II' , "donation" : 500}];
 var donationCrossfilter = crossfilter(data);
 var classDim = donationCrossfilter.dimension(function(d){ return d.class});
 var classGrp = classDim.group();
 var compositechart = dc.compositeChart("#compositechart");
 compositechart
   .x(d3.scaleBand())
   .xUnits(dc.units.ordinal)
   .margins({top:5 , right:60 , left : 60 , bottom:20})
   .elasticY(true)
   .group(classGrp)
   .dimension(classDim)
   .rightY(d3.scaleLinear())
   .xAxis().tickSize(0);
 compositechart.compose(
         [
          dc.lineChart(compositechart)
            .group(classGrp)
            .valueAccessor(function(d){ return d.value} ),
          dc.barChart(compositechart)
            .group(classGrp.reduceSum(function(d){ return d.donation}))
            .valueAccessor(function(d){ return d.value})
            .useRightYAxis(true)
          ]);

 compositechart.render();

在左侧 y 轴上应显示每个班级的计数为 1 ,1，在右侧 y 轴上应显示每个班级捐赠的总和为 400、500

【问题讨论】：

标签： dc.js crossfilter

【解决方案1】：

学习crossfilter的时候有点意外：貌似应该使用函数式编程，但API实际上是命令式的。

因此，当您选择reduceCount 或reduceSum 时，实际上会更改现有组对象 以使用该缩减，并返回相同的对象。

在您的示例中，sum 替换了 count，并且两个子图表都显示了总和。

要获得两组，一组计数，一组求和，请执行以下操作：

var classGrpCount = classDim.group().reduceCount();
var classGrpSum = classDim.group().reduceSum(function(d){ return d.donation});
//...
compositechart.compose(
         [
          dc.lineChart(compositechart)
            .group(classGrpCount)
            .valueAccessor(function(d){ return d.value} ),
          dc.barChart(compositechart)
            .group(classGrpSum)
            .valueAccessor(function(d){ return d.value})
            .useRightYAxis(true)
          ]);

我认为选择这种风格是为了提高效率。由于每个组将继续存在并跟踪对选择的更改，因此您不希望这些函数创建新组。

【讨论】：