dc.js按y轴/值排序顺序线图

时间:2014-05-21 05:42:00

标签: javascript d3.js charts dc.js

我有一个dc.js序数图表,其x轴由诸如“化妆品”之类的东西组成。 y轴是销售数量。我希望按销售额减少对图表进行排序,但是当我使用.ordering(function(d){return -d.value.ty})时,折线图的路径仍按x轴排序。Mangled Graph

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();

3 个答案:

答案 0 :(得分:2)

这是我最终做的黑客攻击。请注意,它可能会对大型数据集产生性能问题,因为all()比top(Infinity)更快。出于某种原因,我无法让Gordon's answer工作,但理论上它应该。

在我的小组中,我指定了一个订单功能

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

然后因为all()不使用order函数我覆盖了默认的所有函数

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

然后在我的图表上我必须指定一个订单功能

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

答案 1 :(得分:1)

毫无疑问,这是一个错误。

作为一种变通方法,您可以自己对数据进行排序,而不是使用排序函数as described in the FAQ

我提交了一份错误报告:https://github.com/dc-js/dc.js/issues/598

答案 2 :(得分:1)

它似乎确实是一个错误。我也无法按预期工作。 我实施了一个解决方法;我在一个Plunker中添加了一个例子,链接是(也)在github的dc.js问题中。 它基于dc.js 2.0.0-dev的最新快照。 (所以现在我猜这可以算是一个答案)

http://embed.plnkr.co/VItIQ4ZcW9abfzI13z64/