javascript – 使用dc.js按条形图对条形图中的条进行排序(排序)

如何通过维度的计算值而不是维度本身的名称对dc.js示例中的x轴(维度)进行排序?

例如,在以下位置考虑序数条形图的dc.js示例:

https://github.com/dc-js/dc.js/blob/master/web/examples/ord.html

如何按水果计数的降序对x轴进行排序?

这是我尝试过的:(jsfiddle:http://jsfiddle.net/gautam/re9r9kk7/)

var counts = [
  {name: "apple", cnt: 10},
  {name: "orange", cnt: 15},
  {name: "banana", cnt: 12},
  {name: "grapefruit", cnt: 2},
  {name: "grapefruit", cnt: 4}
];

var ndx            = crossfilter(counts),
    fruitDimension = ndx.dimension(function(d) {return d.name;}),
    sumGroup       = fruitDimension.group().reduceSum(function(d) {return d.cnt;});

chart
  .width(768)
  .height(380)
  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)
  .brushOn(false)
  .xAxisLabel("Fruit")
  .yAxisLabel("Quantity Sold")
  .dimension(fruitDimension)
  .barPadding(0.1)
  .outerPadding(0.05)
  .group(sumGroup);
最佳答案
基础mixin上有一个名为chart.ordering()的函数.

它特别适用于在不需要字母默认值时更改序数值的顺序.传递给此函数的函数采用{key,value}对并返回一个值以进行排序.

对于按值按降序排列条形图,您可以这样做

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

转载注明原文:javascript – 使用dc.js按条形图对条形图中的条进行排序(排序) - 代码日志