D c. js: невозможно заказать гистограмму с помощью заказа

Question

Строка № 85 из index.js.

Функция заказа не работает, так как я не получаю вывод для console.log(). Я не знаю, почему это не работает для этого случая. Для моего rowChart мне удалось отсортировать в порядке убывания, используя .ordering()

Вот демоверсия с кодом: https://blockbuilder.org/ninjakx/483fd69328694c6b6125bb43b9f7f8a7

Я хочу, чтобы эти графики были отсортированы по значениям, но не в состоянии это сделать.

Обновление:

следующий этот ответ, я пришел с этим решением (попробовал на пустышке). Но это работает только тогда, когда я использую функцию reduceCount(), reduceSum() без reductio.js

Я использую 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

Чтобы подвести итог вашего вопроса, вам нужна порядковая диаграмма диапазона / фокуса с столбцами, отсортированными в порядке убывания. Чтобы сделать вещи еще более интересными, группы сокращаются с помощью reductio.max.

Я думаю, что идея переопределения .all() для вызова .top() с использованием order группы является ложным лидерством (хотя, возможно, ее можно заставить работать).

В примере диаграммы фокусировки / диапазона , который вы используете в своем bl.ock (спасибо!), Мы отображаем порядковые ключи по порядку на целые числа в линейном масштабе.

Легко отсортировать значения перед отображением, и похоже, что функция 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));

Вилка вашего блока .