dc.js/Crossfilter -- 创建具有维度平均值的有序条形图？答案

【问题标题】：dc.js/Crossfilter -- Create ordinal bar chart with average values for dimensions?dc.js/Crossfilter -- 创建具有维度平均值的有序条形图？
【发布时间】：2016-04-10 11:19:21
【问题描述】：

完整的 JS 摆弄数据示例在这里：https://jsfiddle.net/ojrhn96y/2/。

我有一些具有两个值的数据：Achievement 和 Balance。我目前使用 dc.js 创建了两个文本元素，用于跟踪两个值的平均值。但是，我想要一个带有 x 轴 ['Achievement', 'Balance'] 的条形图，然后将 [achievement_sum, balance_sum] 作为其 y 值，每个指标都有一个条形图。

我将如何创建这种类型的条形图？

我有我的平均值，这些值是使用以下方法创建的：

  achievementAvg = achievement.groupAll().reduceSum(
    function(d) {
      return d.achievement;
    }),

但不确定如何将这些值分配给单独的条形图。

【问题讨论】：

标签： dc.js crossfilter

【解决方案1】：

由于您基本上是在旋转数据，因此交叉过滤器不直接支持该行为，它想要过滤和聚合行，而不是列。

但您可以为此使用"fake group"，只要您不关心能够按这些类别进行过滤即可。（这意味着什么？我不想考虑。）

首先我们需要创建一个完全没用的维度对象，因为 dc.js 想要一个。如果您想出一种过滤这些类别的方法，那么您可以在这里实现它：

var bogus_dimension = {};

然后是假组，一个实现all 方法的对象，它返回一个{key,value} 对数组，就像一个真正的组：

var fake_group = {
    all: function() {
        return [{key: 'Achievement', value: achievementAvg.value()/ndx.size()},
                {key: 'Balance', value: balanceAvg.value()/ndx.size()}];
    }
}

我们用序数刻度初始化条形图：

dc.barChart('#bar-chart')
    .width(200)
    .height(200)
    .dimension(bogus_dimension)
    .group(fake_group)
    .xUnits(dc.units.ordinal)
    .x(d3.scale.ordinal())

这是你的小提琴的一个分支，所有代码都已到位：https://jsfiddle.net/gordonwoodhull/x03f37bk/8/

【讨论】：