使用 dc.js 渲染行图时丢失数据

Question

我在创建 dc.js 行图时丢失了数据。

  var ndx = crossfilter(data);

  var emailDimemsion = ndx.dimension(function(d) {
    return d.email;
  });

  var emailGroup = emailDimemsion.group().reduce(
    function(p, d) {
      ++p.count;
      p.totalWordCount += +d.word_count;
      p.studentName = d.student_name;
      return p;
    },
    function(p, d) {
      --p.count;
      p.totalWordCount -= +d.word_count;
      p.studentName = d.student_name;
      return p;
    },
    function() {
      return {
        count: 0,
        totalWordCount: 0,
        studentName: ""
      };
    });


  leaderRowChart
    .width(600)
    .height(300)
    .margins({
      top: 0,
      right: 10,
      bottom: 20,
      left: 5
    })
    .dimension(emailDimemsion)
    .group(emailGroup)
    .elasticX(true)
    .valueAccessor(function(d) {
      return +d.value.totalWordCount;
    })
    .rowsCap(15)
    .othersGrouper(false)
    .label(function(d) {
      return (d.value.studentName + ": " + d.value.totalWordCount);
    })
    .ordering(function(d) {
      return -d.value.totalWordCount
    })
    .xAxis()
    .ticks(5);

  dc.renderAll();

fiddle来了，https://jsfiddle.net/santoshsewlal/6vt8t8rn/

我的图表是这样的：

但我希望我的结果是

我是否搞砸了 reduce 函数以遗漏数据？

谢谢

Answer 1

不幸的是，使用交叉过滤器的 dc.js 图表有两个级别的排序。

首先，dc.js 使用 group.top(N) 拉取前 N 个，其中 N 是 rowsCap 值。 Crossfilter 根据 group.order function.

对这些项目进行排序

然后它使用 chart.ordering 函数再次对项目进行排序。

在这种情况下，第二种排序可以掩盖第一种排序不正确的事实。除非您告诉它要查看哪个字段，否则 Crossfilter 不知道如何对对象进行排序，因此 group.top(N) returns 一些随机项目。

您可以通过使交叉过滤器组的 order 与图表的 ordering:

匹配来修复您的图表

emailGroup.order(function(p) {
  return p.totalWordCount;
})

你的 fiddle 分支：https://jsfiddle.net/gordonwoodhull/0kvatrb1/1/

看起来有一个学生的字数要长得多，但除此之外这与您的电子表格一致：

我们计划在未来停止使用 group.top，因为当前的行为非常不一致。

https://github.com/dc-js/dc.js/issues/934

更新：如果你愿意使用不稳定的最新版本，dc.js 2.1.4 及以上版本不要使用group.top - 封顶仅由 chart.ordering、capMixin.cap, and capMixin.takeFront 决定。

使用 dc.js 渲染行图时丢失数据

Losing data when rendering rowchart using dc.js

javascript

crossfilter

dc.js