按单位和百分比排列的堆积条形图

Summary

我想显示一个条形图，其维度为天，堆叠类别为另一个（即 x 轴 = 天且堆栈 = 类别-1），但是，我不是显示每个组/堆栈的简单数量总和，而是显示想要显示一天的百分比。

JSFiddle https://jsfiddle.net/wostoj/L1q50d4g/

Details

我有包含日期​​、数量和其他分类器的数据。为了这个问题的目的，我可以将其简化为：

data = [
 {day: 1, cat: 'a', quantity: 25},
 {day: 1, cat: 'b', quantity: 15},
 {day: 1, cat: 'b', quantity: 10},
 {day: 2, cat: 'a', quantity: 90},
 {day: 2, cat: 'a', quantity: 45},
 {day: 2, cat: 'b', quantity: 15},
]

我可以设置一个条形图，通过day，显示总单位数 (quantity), stacked by cat (see JSFiddle）。但我想做的是设置相同的图表，以便它显示每个的数量day, 堆叠为cat，占总数的百分比quantity那天。因此，从图形上看，输出将如下所示。

[
 {day: 1, cat: 'a', percent: 0.5}, //   25    / (25+15+10)
 {day: 1, cat: 'b', percent: 0.5}, // (15+10) / (25+15+10)
 {day: 2, cat: 'a', percent: 0.9}, // (90+45) / (90+45+15)
 {day: 2, cat: 'b', percent: 0.1}  //   15    / (90+45+15)
]

Images

左边这个来自上面的数据，可以在JSFiddle中制作。右边的是我想要基于相同的数据集（xf = crossfilter(data);）。我对它进行了硬编码（在 JSFiddle 的上方和中）以创建第二个，只是为了直观地显示我想要做什么。

我这通常被称为标准化堆积条形图.

我将仅使用一组数据来组织数据，以便使用自定义的归约函数立即访问所有值：

var group = dayDim.group().reduce(
    function(p, v) {
        p[v.cat] = (p[v.cat] || 0) + v.quantity;
        return p;
    },
    function(p, v) {
        p[v.cat] = p[v.cat] - v.quantity;
        return p;
    },
    function() {
        return {};
    });

这几乎是标准一次减少多个值的方法来自常见问题解答。

这样做的优点是，当您访问这些值时，您可以轻松地除以所有值的总和：

  .group(group, 'a', kv => kv.value.a / d3.sum(Object.values(kv.value)))
  .stack(group, 'b', kv => kv.value.b / d3.sum(Object.values(kv.value)))

你小提琴的叉子。