Question

我一直试图通过使用我自己的数据复制此处的代码https://github.com/dc-js/dc.js/blob/develop/web/examples/table-on-aggregated-data.html来了解dc.js。

[
{"grade": 8, "category": "Math", "rating": 4},
{"grade": 8, "category": "English", "rating": 3},
{"grade": 8, "category": "Math", "rating": 1},
{"grade": 8, "category": "Math", "rating": 3},
{"grade": 8, "category": "Science", "rating": 1},
{"grade": 9, "category": "Science", "rating": 2},
{"grade": 9, "category": "Science", "rating": 5},
{"grade": 9, "category": "English", "rating": 5}
]

结果是这样的表：

8   English 3
8   Math    2.67
8   Science 1
9   English 5
9   Science 3.5

我把它放在一起

        var chart = dc.dataTable("#test");

        d3.json("test.json", function(error, experiments) {

          console.log(experiments);

          var ndx              = crossfilter(experiments),
          exptDimension    = ndx.dimension(function(d) {return +d.grade;}),
          groupedDimension = exptDimension.group().reduce(
            function (p, v) {
              ++p.number;
              p.total += +v.rating;
              p.category = v.category;
              p.grade = v.grade;
              p.avg = (p.total / p.number).toFixed(2);
              console.log(p);
              return p;
            },
            function (p, v) {
              --p.number;
              p.total -= +v.rating;
              p.category = v.category;
              p.grade = v.grade;
              p.avg = (p.number == 0) ? 0 : Math.round(p.total / p.number).toFixed(2);
              return p;
            },
            function () {
              return {number: 0, total: 0, avg: 0, category:"", grade:"", }
            }),
          rank = function (p) { return "rank" };

          chart
          .width(768)
          .height(480)
          .dimension(groupedDimension)
          .group(rank)
          .columns([function (d) { console.log(d); return d.value.grade },
            function (d) { return d.value.category },
            function (d) { return d.value.avg }])
          .sortBy(function (d) { return d.value.avg })
          .order(d3.descending)
          chart.render();
        });

有了这个结果：

9   English 4.00
8   Science 2.40

我觉得我错过了一些非常简单的事情。有没有人建议如何继续？

由于

Answer 1

是的，这很简单 - 或者说很简单。这是一个隐含的要求，您希望按年级和类别进行分组，而您只是按年级进行分组。你的reduce函数不会那么有意义，因为

          p.category = v.category;

假设每个年级只有一个类别。但如果你忽略了这一点，那么答案就是＆＃34;正确＆＃34;，因为9年级学生的平均评分是4，而8年级学生的平均评分是2.4。

要按年级和类别进行分组，您可以指定包含两个值的维度键：

      exptDimension    = ndx.dimension(function(d) {return d.category+'/'+d.grade;}),

这构造了一个包含两个值的字符串。有些人只是在这里制作数组键，但我不喜欢它，因为它会对字符串进行一些隐式转换，这有点慢。

所以这很容易，但只按平均等级排序：

9   English 5.00
9   Science 3.50
8   English 3.00
8   Math    2.67
8   Science 1.00

http://jsfiddle.net/gordonwoodhull/5sbdvtqv/2/

另一个隐含的要求是您希望按升序排序，并按降序排列平均排名。这有点困难，因为这意味着您需要指定一个编码两个相反订单的密钥。

以下是一种方法：

      .sortBy(function (d) { return (20-d.value.grade)*1000 + d.value.avg; })

呀。哇。维护起来很有趣，但我不知道更好的方法。它创建了一个排序键，其中等级是高度负加权的，平均值是弱正加权，当与d3.descending结合使用时，它会做你想要的。

最终结果：

8   English 3.00
8   Math    2.67
8   Science 1.00
9   English 5.00
9   Science 3.50

http://jsfiddle.net/gordonwoodhull/5sbdvtqv/9/

关于聚合数据的dc.js表

1 个答案: