Dc.js：无法使用排序方式对我的条形图进行排序

Question

行号85 个 index.js。

排序功能无法正常工作，因为我无法获得 console.log() 的输出。我不知道为什么它不适用于这种情况。对于我的 rowChart，我能够使用 .ordering()

按降序排序

这是带有代码的演示：https://blockbuilder.org/ninjakx/483fd69328694c6b6125bb43b9f7f8a7

我希望这些图表按值排序，但无法做到。

更新：

根据 this 的回答，我想到了这个解决方案（在虚拟案例中试过）。但这仅在我使用没有 reductio.js

的 reduceCount()、reduceSum() 函数时有效

我正在使用 reductio.js 从组中获取最大值。

       var data = crossfilter([
        { foo: 'one', bar: 1 },
        { foo: 'two', bar: 2 },
        { foo: 'three', bar: 3 },
        { foo: 'one', bar: 4 },
        { foo: 'one', bar: 5 },
        { foo: 'two', bar: 6 },
      ]);

      var dim = data.dimension(function(d) { return d.foo; });
      var group = dim.group();
      let TypeGroup = group.reduceCount(function(d) { 
          return d.bar; }
          );


      TypeGroup.order(function(p) {
          return p;
      });

      TypeGroup.all = function() {
          return group.top(Infinity);
      }

        focus = new dc.barChart('#focus');
// 
      focus
          // .ordering(function(d){return -d.value.max})
          //dimensions
          //.width(768)
          .height(250)
          .margins({top: 10, right: 50, bottom: 25, left: 50})
          //x-axis
          .x(d3.scaleOrdinal())
          .xUnits(dc.units.ordinal)
          .xAxisLabel('Department')
          //left y-axis
          .yAxisLabel('Sales')
          .elasticY(true)
          .renderHorizontalGridLines(true)
          //composition
          .dimension(dim)
          .group(TypeGroup)

      focus.ordering(function(d){
          return -d
      });

输出：

还原:

       var data = crossfilter([
        { foo: 'one', bar: 1 },
        { foo: 'two', bar: 2 },
        { foo: 'three', bar: 3 },
        { foo: 'one', bar: 4 },
        { foo: 'one', bar: 5 },
        { foo: 'two', bar: 6 },
      ]);

      var dim = data.dimension(function(d) { return d.foo; });
      var group = dim.group();
      // let TypeGroup = group.reduceCount(function(d) { 
      //     return d.bar; }
      //     );

      var reducer_g = reductio().max(function(d) { 
          // console.log("max:",d.Time_estimate);
          return parseFloat(d.bar)
      });

      let TypeGroup = reducer_g(group);


      TypeGroup.order(function(p) {
        console.log(p);
          return p.max;
      });

      TypeGroup.all = function() {
          return group.top(Infinity);
      }

        focus = new dc.barChart('#focus');
// 
      focus
          // .ordering(function(d){return -d.value.max})
          //dimensions
          //.width(768)
          .height(250)
          .margins({top: 10, right: 50, bottom: 25, left: 50})
          //x-axis
          .x(d3.scaleOrdinal())
          .xUnits(dc.units.ordinal)
          .xAxisLabel('Department')
          //left y-axis
          .yAxisLabel('Sales')
          .elasticY(true)
          .renderHorizontalGridLines(true)
          //composition
          .dimension(dim)
          .group(TypeGroup)

      focus.ordering(function(d){
          return -d.value.max
      });

输出：

所以你可以看到我没有得到任何酒吧。所以我假设我非常接近解决方案，因为我在控制台中没有收到任何错误。我相信如果我让它适用于这种情况，那么我将能够使用相同的方式对原始图表进行排序。

Answer 1

为了总结您的问题，您需要一个顺序 range/focus 条形图，其中条形图按降序排列。为了让事情变得更有趣，使用 reductio.max 减少了组。

我认为使用组的 order 覆盖 .all() 来调用 .top() 的想法是错误的引导（尽管它可能会起作用）。

在您在 bl.ock（谢谢！）中使用的 ordinal focus/range chart example 中，我们按顺序将序号键映射到线性尺度上的整数。

在进行映射之前对值进行排序很容易，看起来 ordinal_to_linear_group 函数通过将 sort 作为第二个参数来预测需要。但是没有实现，所以让我们添加它！

function ordinal_to_linear_group(group, sort) {
    var _ord2int, _int2ord;
    return {
        all: function() {
            var ret = group.all();
            if(sort) // NEW
              ret = ret.slice().sort(sort);
            _ord2int = {};
            _int2ord = [];
            ret.forEach(function(d, i) {
                _ord2int[d.key] = i;
                _int2ord[i] = d.key;
            });
            return ret;
        },
        ord2int: function(o) {
            if(!_ord2int)
                this.all();
            return _ord2int[o];
        },
        int2ord: function(i) {
            if(!_int2ord)
                this.all();
            return _int2ord[i];
        }
    };
}

我们需要 slice 复制一份，然后对其进行排序，因为 group.all() 正在返回其内部状态，如果您更改该数组，它会变得混乱。

它需要一个标准的 Array.sort 比较器函数，我们可以使用 d3.descending:

来提供它

     var group = ordinal_to_linear_group(barTypeGroup,
                    (a,b) => d3.descending(a.value.max, b.value.max));

Fork of your bl.ock.

Dc.js：无法使用排序方式对我的条形图进行排序

Dc.js : Not able to order my bar graph using ordering

d3.js

dc.js