Dc.js:无法使用订购来订购我的条形图

girl女

行号 的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
      }); 

输出:

在此处输入图片说明

这样您就可以看到我没有任何障碍。因此,我认为我非常接近该解决方案,因为我在控制台中没有任何错误。我相信,如果在这种情况下可以使用它,那么我将能够使用相同的图对原始图进行排序。

高登

总结您的问题,您需要一个序数范围/焦点条形图,其条形按降序排列。为了使事情变得更加有趣,使用减少了组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));

降序范围焦点

你的bl.ock的叉子

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

再次在dc.js中订购条形图标签

dc.js:数据子集上的条形图

带日期轴的DC.js条形图

条形图dc.js的标签自动调整大小

dc.js条形图的阈值/色带

dc.js 条形图的不同颜色

在嵌套JSON上使用dc.js创建条形图

在dc.js和crossfilter.js中使用堆积条形图过滤时,为什么我的饼图显示不正确的组?

无法在 R 中订购条形图

dc js-使用dc js的直方图

使用DC.js和交叉过滤器的复合图(条形图和线形图),当条形值= 0时线消失

使用crossfilter / dc.js绘制面积归一化条形图的有效方法?

Seaborn条形图订购

Crossfilter.js和dc.js条形图问题

跳过x轴上的重叠标签以获取dc.js中的条形图

如何在dc.js中为不同颜色的条形图添加图例?

如何动态更改条形图(dc.js)中的bin大小?

您将如何让 dc.js 条形图不可点击但可悬停?

选择图例名称以显示在dc.js条形图中

dc.js / d3.js-如果条形图的bar值等于零,如何隐藏条形图的x轴类别值?

二维的dc.js序数堆叠条形图,获取NaN值且不显示堆叠条形图

如何在dc.js中呈现时间序列/分类堆积条形图,过滤堆栈和条形图

无法使用node-xmlreader解析dc:creator / dc:content

订购Altair中的条形图?

如何使ggplot订购堆叠条形图

ggplot订购群集条形图

在R中订购条形图

dc.js带有条形图和折线图的复合图表。在栏上实现单选

dc.js-带有空bin过滤器的堆积条形图以奇怪的方式显示