Question

我正在cap rowChart中使用dc.js函数。虽然渲染图形时我无法让组使用正确的顺序。我使用了“假组”方法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中不起作用

1 个答案: