dc.js 按 y 轴/值对有序折线图进行排序 [英] dc.js sort ordinal line chart by y axis/value

问题描述

I have a dc.js ordinal chart whose x-axis consists of things like 'Cosmetics' and the y-axis is the number of sales. I want to sort the chart by sales decreasing, however when I use .ordering(function(d){return -d.value.ty}) the path of the line chart is still ordered by the x-axis.

var departmentChart = dc.compositeChart('#mystore_department_chart'),
                ndx = crossfilter(response.data),
                dimension = ndx.dimension(function(d) {return d.name}),
                group = dimension.group().reduce(function(p, v) {
                    p.ty += v.tyvalue;
                    p.ly += v.lyvalue;
                    return p;
                }, function(p, v) {
                    p.ty -= v.tyvalue;
                    p.ly -= v.lyvalue;
                    return p;
                }, function() {
                    return {
                        ty: 0,
                        ly: 0
                    }
                });

            departmentChart
                .ordering(function(d){return -d.value.ty})
                //dimensions
                //.width(768)
                .height(250)
                .margins({top: 10, right: 50, bottom: 25, left: 50})
                //x-axis
                .x(d3.scale.ordinal())
                .xUnits(dc.units.ordinal)
                .xAxisLabel('Department')
                //left y-axis
                .yAxisLabel('Sales')
                .elasticY(true)
                .renderHorizontalGridLines(true)
                //composition
                .dimension(dimension)
                .group(group)
                .compose([
                    dc.barChart(departmentChart)
                        .centerBar(true)
                        .gap(5)
                        .dimension(dimension)
                        .group(group, 'This Year')
                        .valueAccessor(function(d) {return d.value.ty}),

                    dc.lineChart(departmentChart)
                        .renderArea(false)
                        .renderDataPoints(true)
                        .dimension(dimension)
                        .group(group, 'Last Year')
                        .valueAccessor(function(d) {return d.value.ly})
                ])
                .brushOn(false)
                render();

解决方案

This is the hack I ended up doing. Be aware that it could have performance issues on large data sets as all() is faster than top(Infinity). For some reason I couldn't get Gordon's answer to work, but in theory it should.

On my group I specified an order function

group.order(function(p) {
    return p.myfield;
});

Then because all() doesn't use the order function I overrode the default all function

group.all = function() {
    return group.top(Infinity);
}

And then on my chart I had to specify an order function

chart.ordering(function(d){
    return -d.value.myfield
}); // order by myfield descending

这篇关于dc.js 按 y 轴/值对有序折线图进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！