dc.js按y轴/值对有序折线图进行排序

蒂莫西·鲁尔(Timothy Ruhle)

我有一个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();
蒂莫西·鲁尔(Timothy Ruhle)

这是我最终做的hack。请注意,由于all()比top(Infinity)快,因此在大型数据集上可能会出现性能问题。由于某种原因,我无法得到戈登的答案,但从理论上讲应该如此。

我在小组中指定了订单功能

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

dc.js中的双Y轴折线图

来自分类Dev

dc.js中的双Y轴折线图

来自分类Dev

DC.js折线图-未显示任何线

来自分类Dev

如何使用dc.js创建多折线图

来自分类Dev

使用DC.JS的多系列折线图

来自分类Dev

dc.js中的多系列折线图

来自分类Dev

dc.js折线图未显示任何内容

来自分类Dev

dc.js时间序列折线图

来自分类Dev

带有dc.js的堆叠系列折线图(堆叠区域)

来自分类Dev

dc.js堆叠的折线图,具有1个以上的维度

来自分类Dev

dc js-使用dc js的直方图

来自分类Dev

dc js-使用dc js的直方图

来自分类Dev

过滤其他图表后,dc-js折线图消失了

来自分类Dev

.renderTitle(false) 不适用于折线图 DC.js

来自分类Dev

DC.js-顺序刻度线图的自定义排序

来自分类Dev

DC和.NET中DC的Lastlogon时间返回不同的值

来自分类Dev

dc.js:动态多维

来自分类Dev

BC与DC有何不同?

来自分类Dev

在DC js rowChart中固定x轴?

来自分类Dev

隐藏dc.js图表X轴

来自分类Dev

dc.js:带有嵌套分组的箱线图

来自分类Dev

在 dc.js 中排序热图

来自分类Dev

dc.js pieChart设置特定的x轴值

来自分类Dev

如何使用具有以下数据类型的DC.js渲染多线图-JAVASCRIPT(DC.js)

来自分类Dev

dc.js barCharts中的.x()问题

来自分类常见问题

dc.js显示过滤的对象数

来自分类Dev

dc.js不尊重xUnits

来自分类Dev

放大dc.js中的文本标签

来自分类Dev

DC JS-无法重绘图表