Question

说我有以下数据结构：

[
    {columnA: 1, columnB: 2, columnC: 3},
    {columnA: 4, columnB: 5, columnC: 6},
    {columnA: 7, columnB: 8, columnC:9}
]

通常您可以根据一列定义维度：

var dimensionA = myCrossFilter.dimension(function(row) {
    return row.columnA;
})

并分组：

dc.pieChart("#chart")
    .dimension(dimensionA )
    .group(dimensionA.group )
    .xAxis().ticks(3);

如何根据不同的列定义维度并使用crossfilter / DC对其进行分组？即如果我想分组并按columnA，columnB和columnC？

显示一个pieChart

更新：当我遍历数据时，我可以得到每列的总和：

var a =0, b=0, c=0;
dataSet.forEach(function(d) {
 a += d.a;
 b += d.b;
 c += d.c;

}

如何使用上面的静态数据绘制pieChart，如下所示：

dc.pieChart("#chart")
    .dimension(["A", "B", "C"] )
    .group([12, 15, 18] )
    .xAxis().ticks(3);

谢谢！

Answer 1

因此，这是Codepen的更新版本，它运行并将每列聚合为dc.js可以理解的组格式，并将其显示为饼图：http://codepen.io/anon/pen/bEXbyW

关键点是您需要使用自定义缩减器将所有值聚合到一个组

speedSumGroup = runDimension.group().reduce(function(p,d) {
      p.a += d.A;
      p.b += d.B;
      p.c += d.C;
      return p;
    }, function(p,d) {
      p.a -= d.A;
      p.b -= d.B;
      p.c -= d.C;
      return p;
    }, function() {
      return { a: 0, b: 0, c:0 }
    });

然后您需要创建一个假组，该组返回dc.js为了构建饼图所期望的格式

var fakeGroup = {
  all: function() { return [
    { key: "A", value: speedSumGroup.top(1)[0].value.a },
    { key: "B", value: speedSumGroup.top(1)[0].value.b },
    { key: "C", value: speedSumGroup.top(1)[0].value.c }
  ]; }
}

chart
    .dimension(runDimension)
    .group(fakeGroup);

如上所述，我强烈建议您将数据转换为更适合使用dc.js和Crossfilter的格式，如果您打算使用这些库，而不是通过这些类型的体操来使您的数据正常工作。正确转换数据可以得到更简单的结果：

var chart = dc.pieChart("#test");
var data = [ 
    {A: 1, B: 2, C: 3},
    {A: 4, B: 5, C: 6},
    {A: 7, B: 8, C:9}
];

var newData = [];

data.forEach(function(d) {
  for(key in d) {
    newData.push({ name: key, value: d[key] });
  }
});

var ndx = crossfilter(newData);
var dim = ndx.dimension(function(d) { return d.name; });
var grp = dim.group().reduceSum(function(d) { return d.value; });

chart
    .dimension(dim)
    .group(grp);

  chart.render();

转型示例：http://codepen.io/anon/pen/QyeWWa

Crossfilter维度：如何从静态数据/ json列而不是特定变量创建维度？

1 个答案: