dc.js 按y轴/值排序折线图答案

【问题标题】：dc.js sort ordinal line chart by y axis/valuedc.js 按y轴/值排序折线图
【发布时间】：2014-07-09 14:30:50
【问题描述】：

我有一个 dc.js 序数图表，它的 x 轴由“化妆品”之类的内容组成，y 轴是销售数量。我想按销售额减少对图表进行排序，但是当我使用.ordering(function(d){return -d.value.ty}) 时，折线图的路径仍然按 x 轴排序。

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

【问题讨论】：

标签： javascript d3.js charts dc.js

【解决方案1】：

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

在我的组中我指定了一个订单函数

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

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

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

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

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

【讨论】：

哇哦，覆盖 group.all。这很聪明。感谢您分享您如何修复它；它应该有助于真正的修复。请接受您自己的答案
效果很好，但是使用较大数据集的性能下降是灾难性的！有什么解决办法吗？

【解决方案2】：

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

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

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

【讨论】：

我可以确认原始组是按键排序的，当我实施解决方法时，组按值排序，但图表仍按 x 轴/键排序。如果我使用图表排序功能，仍然会出现同样的错误。
您是否在所有三个地方都提供了相同的“假组”？这令人沮丧。如果您可以创建一个小提琴，它将有很大帮助。
是的，我做到了。感谢您的帮助，并在下面查看我如何修复它的答案。

【解决方案3】：

这似乎是一个错误。我也无法让它按预期工作。我实施了一种解决方法；我在 Plunker 中添加了一个示例，链接（也）在 github 的 dc.js 问题中。它基于 dc.js 2.0.0-dev 的最新快照。（所以现在我想这可以被认为是一个答案）

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

【讨论】：