javascript - 订购带有假组的封顶图表在 dc.js 中不起作用

Question

我正在尝试为 dc.js 中的 rowChart 使用 cap 函数。不过，我无法让小组在呈现图形时使用正确的顺序。我使用了发现的“假组”方法 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/