从同一列的数据组创建多个图表

Question

如何制作此信息中心

来自此数据

time,group_name,value
15/10/2017 15:36:15,group-1,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:15,group-2,1
15/10/2017 15:36:16,group-1,1
15/10/2017 15:36:16,group-3,1
15/10/2017 15:36:16,group-1,1
15/10/2017 15:36:16,group-3,1
15/10/2017 15:36:17,group-3,1
15/10/2017 15:36:17,group-3,1
15/10/2017 15:36:17,group-1,1
15/10/2017 15:36:17,group-2,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:18,group-2,1
15/10/2017 15:36:18,group-1,1
15/10/2017 15:36:19,group-3,1
15/10/2017 15:36:19,group-2,1
15/10/2017 15:36:19,group-2,1
15/10/2017 15:36:19,group-1,1

使用dc.js？

提前谢谢。

Answer 1

您可以通过首先按时间和组列进行尺寸标注/分组，然后使用假组将一个组拆分为多个组来实现此目的。

我无法访问您的数据（最好在提问时将数据粘贴为文本），因此我使用其中一个dc.js示例中的数据编写了一个示例。数据如下所示：

Expt,Run,Speed
1,1,850
1,2,740
1,3,900
1,4,1070
1,5,930
1,6,850
...
2,1,960
2,2,940
2,3,960
2,4,940
2,5,880
2,6,800

有两个重要步骤。首先，我们需要创建一个在X维度和维度上键入的维度和组以进行拆分。在这种情况下，我们希望Run成为X维度，我们希望按Expt拆分。我们先将Run放在首位。这个小组很正常。

var runExptDim = cf.dimension(function(d) {
  return [d.Run, d.Expt];
});
var runExptGroup = runExptDim.group().reduceSum(function(d) {
  return d.Speed;
});

现在我们需要一个假组来用第二个键分割原始组。这是一个函数，它允许我们为Expt的所有值构建假组：

function split_group(group2d) {
  return {
    subgroup: function(key) {
      return {
        all: function() {
          return group2d.all().filter(function(kv) {
            return kv.key[1] === key;
          }).map(function(kv) {
            return {key: kv.key[0], value: kv.value};
          }).sort(function(a, b) {
            return a.key - b.key;
          })
        }
      };
    }
  };
}

这里没有魔力。调用子组的.all()方法时，它会从原始组中提取数据，使用密钥的第二部分过滤数据，并使用.map()删除密钥的第二部分。

最后，它还必须对数据进行排序，因为多键会使排序变得混乱，因为当您使用多键时，数据会转换为字符串以进行排序。

抓住这样的子群：

var splitGroup = split_group(runExptGroup);
var runGroup1 = splitGroup.subgroup(1),
  runGroup2 = splitGroup.subgroup(2),
  runGroup3 = splitGroup.subgroup(3);

由于我们有一个奇怪的维度，因此不清楚为图表指定的维度。最简单的方法是在X轴上创建另一个维度：

var runDim = cf.dimension(function(d) {
  return d.Run;
});

但是，这会导致图表自行过滤。我可能会在稍后重新审视我的答案并纠正这个问题。

图表初始化如下所示：

var line1 = dc.lineChart('#line1')
  .width(400).height(200)
  .dimension(runExptGroup)
  .group(runGroup1)
  .x(d3.scale.linear())
  .elasticX(true)
  .elasticY(true);

这不包括您的样式需求，但您可以查看sparkline example的一些提示。

以下是一个示例小提琴：https://jsfiddle.net/gordonwoodhull/og68rkqz/

希望这有帮助！

编辑：显示数字显示中的总数

要显示每个拆分组的总数，您可以创建一个“假groupAll”，它取value s的总和：

  function total_group(group) {
    return {
      value: () => d3.sum(group.all(), kv => kv.value)
    };
  }

数字显示可以采用具有.total()方法的groupAll对象或常规组，在这种情况下，它会找到.all()的最大值

奇怪的是，在使用groupAll时它需要身份值访问器。把它们放在一起：

  var identity = x => x;

  var number1 = dc.numberDisplay('#num1')
    .valueAccessor(identity)
    .group(total_group(runGroup1));

你小提琴的叉子：https://jsfiddle.net/gordonwoodhull/aj1m9ysg/1/