在 dc.js 中无法使用假组订购上限图表

Question

我正在尝试对 dc.js 中的 rowChart 使用 cap 函数。不过，我无法让小组在呈现图形时使用正确的顺序。我使用了 "fake group" 找到的方法 here。

这是我的 HTML 代码：

<button id="btGO" type="button">GO</button>
<div id="chart-row-pnlperb4"></div>

和 javascript 代码：

var thecross;
var numSort = function(a,b) {return (a-b);};
var dim;
var group;

function go() {
    thecross = crossfilter(
        [
            {key:"a",value1:3,value2:-10},
            {key:"b",value1:3,value2:11},
            {key:"c",value1:3,value2:-12},
            {key:"d",value1:3,value2:5},
            {key:"e",value1:3,value2:3},
            {key:"f",value1:3,value2:15},
            {key:"g",value1:3,value2:-8},
            {key:"h",value1:3,value2:6},
            {key:"i",value1:3,value2:-4},
            {key:"j",value1:3,value2:12},
            {key:"k",value1:3,value2:7},
            {key:"l",value1:3,value2:-6.5}
        ]
    );

    dim = thecross.dimension(function(d) {return(d.key.toUpperCase());});
    mygroup =  dim.group().reduceSum(function(d) {return(d.value2);});

    var sort_group = function(source_group) {
        return {
            all: function () {
                return source_group.all();
            },
            top: function(n) {
                return source_group.top(Infinity).sort(function(x,y){return -numSort(Math.abs(x.value),Math.abs(y.value));}).slice(0,n);
            }
        };
    };
    var sorted_group = sort_group(mygroup);

    var pnlPerB4rowChart = dc.rowChart("#chart-row-pnlperb4");
    pnlPerB4rowChart
        .height(300)
        .width(700)
        .dimension(dim)
        .group(sorted_group)
        .valueAccessor(function(d) {
            return Math.abs(d.value);
        })
        //.ordering(numSort)
        .renderLabel(true)
        .renderTitle(false)
        .labelOffsetY(10)
        .elasticX(true)
        .rowsCap(10)
        .othersGrouper(false)
        .margins({left: 70 ,top: 10, bottom: 30, right: 50});

        dc.renderAll();
};

$(function(){
    $("#btGO").click(go)
});

我想按 value2 字段的绝对值降序排列前 10 个柱状图。

我已经把代码放在this jsFiddle

Answer 1

按值降序排列是默认行为。这里唯一的问题是你有负值，所以按绝对值降序与按值排序不一致：

我建议您通过在计算组时立即取绝对值来简化数据处理：

    mygroup =  dim.group().reduceSum(function(d) {return Math.abs(d.value2);});

https://jsfiddle.net/gordonwoodhull/Ln960vq9/18/

那么你就不需要所有其他的 Math.abs.

如果由于某种原因您不能这样做，您也可以将排序顺序值指定为绝对值：

        .ordering(a=>-Math.abs(a.value))

https://jsfiddle.net/gordonwoodhull/Ln960vq9/20/

在 dc.js 中无法使用假组订购上限图表

order a capped chart with fake group does not work in dc.js

javascript

d3.js

crossfilter

dc.js