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

Question

摘要

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

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

详细信息

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

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，通过<{> 1}堆积（请参见{{3} }。但是我想做的是设置相同的图，以便显示每个cat上被day堆叠的数量，占当日总cat的百分比。因此，输出将以图形方式类似于以下内容。

quantity

图片

左边的一个来自上面的数据，可以在JSFiddle中进行。右边的是我要基于相同的数据集（[ {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) ] ）创建的内容。我对其进行了硬编码（在JSFiddle中和在JSFiddle中），以创建第二个以可视化方式显示我要执行的操作。

Answer 1

我通常将其称为normalized stacked bar chart。

我将数据整理成一个组，以便使用自定义的reduce函数立即访问所有值：

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 {};
    });

这几乎是常见问题解答中的标准way to reduce multiple values at once。

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

  .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)))

Fork of your fiddle.