使用dc.js按照条形图的值对条形进行排序。

Question

我该如何按维度的计算值而不是维度名称对dc.js示例中的x轴（维度）进行排序？

例如，考虑dc.js Ordinal Bar Chart的示例：

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);

- Gautam

---

你的代码片段对我无效。 - HattrickNZ

Answer 1

基本混合物上有一个名为 chart.ordering() 的函数。

它专门用于在不想要字母默认顺序时更改序数值的顺序。您传递给此函数的函数接受一个 {key,value} 对并返回一个要排序的值。

要按值降序排序条形图，您可以执行以下操作

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

- Gordon

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);

它给出了以下结果：

- feenz

---

啊，没错，那也可以，而且可能在底层有相同的效果。 - Gordon

谢谢，.ordering() 在我的版本（1.7.3）中没有起作用。 - eagor