使用dc.js按条形值对条形图中的条形进行排序(排序) [英] Sorting (ordering) the bars in a bar chart by the bar values with dc.js

问题描述

如何在dc.js示例中按尺寸的计算值而不是尺寸本身的名称对x轴(尺寸)进行排序?

How can I sort the x-axis (dimension) in the dc.js example by the computed value of the dimension instead of by the name of the dimension itself?

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

For example, consider the dc.js example for an Ordinal Bar Chart at:

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

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

How can I sort the x-axis in descending order of fruit counts?

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

Here is what I have tried: (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上有一个名为

There is a function on the base mixin called chart.ordering().

它专门用于在不需要字母默认值时更改序数值的顺序.传递给此函数的函数采用{key,value}对，并返回要订购的值.

It is specifically for changing the order of ordinal values when the alphabetical default is not wanted. The function you pass to this function takes a {key,value} pair and returns a value to order on.

要按照值的降序对条形进行排序，您可以

For ordering the bars in descending order by value, you'd do

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

这篇关于使用dc.js按条形值对条形图中的条形进行排序(排序)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！