代码之家  ›  专栏  ›  技术社区  ›  Santosh Sewlal

使用dc.js呈现行图时丢失数据

  •  1
  • Santosh Sewlal  · 技术社区  · 8 年前

    创建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();
    

    小提琴在这里, https://jsfiddle.net/santoshsewlal/6vt8t8rn/

    我的图表如下所示: enter image description here

    但我希望我的结果是

    enter image description here

    我是否以某种方式破坏了reduce函数以省略数据?

    谢谢

    1 回复  |  直到 8 年前
        1
  •  1
  •   Community rcollyer    4 年前

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

    首先是dc。js使用 group.top(N) ,其中N是 rowsCap 价值交叉过滤器根据 group.order function .

    然后,它使用 chart.ordering 作用

    在这种情况下,第二种排序可以掩盖第一种排序不正确的事实。Crossfilter不知道如何对对象进行排序,除非您告诉它要查看哪个字段,因此 组顶部(N) 而是返回一些随机项。

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

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

    你的小提琴叉子: https://jsfiddle.net/gordonwoodhull/0kvatrb1/1/

    看起来有一个学生的字数要长得多,但这与您的电子表格一致:

    fixed row chart

    我们计划停止使用 group.top 未来,因为当前行为高度不一致。

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

    使现代化 :如果您愿意使用不稳定的最新版本,dc。js 2.1.4及以上版本不使用 group.top -封顶由以下因素决定: 图表排序 , capMixin.cap capMixin.takeFront 只有