使用dc.js按條形圖對條形圖中的條進行排序（排序）

Question

如何通過維度的計算值而不是維度本身的名稱對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);

Answer 1

基礎mixin上有一個名為chart.ordering()的函數。

它特別適用於在不需要字母默認值時更改序數值的順序。 傳遞給此函數的函數采用{key,value}對並返回一個值以進行排序。

對於按值按降序排列條形圖，您可以這樣做

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

Answer 2

這可能不是最好的方法，但基本上我這樣做：

var sortByCnt = counts.sort(function (a, b) { return a.cnt < b.cnt; });
var names = sortByCnt.map(function (d) { return d.name; });

chart
  .width(768)
  .height(380)
  .x(d3.scale.ordinal().domain(names))
  .xUnits(dc.units.ordinal)
  .brushOn(false)
  .xAxisLabel("Fruit")
  .yAxisLabel("Quantity Sold")
  .dimension(fruitDimension)
  .barPadding(0.1)
  .outerPadding(0.05)
  .group(sumGroup);

它給出了結果：