dc/crossfilter 行图排序提供图表的数据答案

【问题标题】：dc/crossfilter row chart sorting data that feeds chartdc/crossfilter 行图排序提供图表的数据
【发布时间】：2016-07-14 02:02:58
【问题描述】：

学习本教程here
这是我的工作fiddle

我要做的是将spenderRowChart（右图）的顺序从上到下排序。

为此，我创建了一个排序数组 var topSpender =spendPerName.top(Infinity); 如果我理解正确topSpender si 与spendPerName 相同，但topSpender 将被排序

这里是spendPerName 参考：
spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;});

然后在这里将topSpender 传递给spenderRowChart

.group(topSpender)

但这不起作用，我收到以下错误。 fiddle here

Uncaught TypeError: group.all is not a function

谁能纠正我的错误方式？

更多代码在这里

   var yearRingChart   = dc.pieChart("#chart-ring-year"),
        spenderRowChart = dc.rowChart("#chart-row-spenders");
    //var connection = new WebSocket('ws://localhost:8001/websocket');
    var data1 = [
        {Name: 'Ben', Spent: 330, Year: 2014, 'total':1},
        {Name: 'Aziz', Spent: 1350, Year: 2012, 'total':2},
        {Name: 'Vijay', Spent: 440, Year: 2014, 'total':2},
        {Name: 'Jarrod', Spent: 555, Year: 2015, 'total':1},
    ];
    // set crossfilter with first dataset
    var xfilter = crossfilter(data1),
        yearDim  = xfilter.dimension(function(d) {return +d.Year;}),
        spendDim = xfilter.dimension(function(d) {return Math.floor(d.Spent/10);}),
        nameDim  = xfilter.dimension(function(d) {return d.Name;}),

        spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
        spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;});

        var topSpender =spendPerName.top(Infinity); //sort top spenders

    function render_plots(){
        yearRingChart
            .width(200).height(200)
            .dimension(yearDim)
            .group(spendPerYear)
            .innerRadius(50);
        spenderRowChart
            .width(250).height(200)
            .dimension(nameDim)
            .group(topSpender)
            .elasticX(true);
        dc.renderAll();
    }
    render_plots();

【问题讨论】：

标签： javascript jquery css dc.js crossfilter

【解决方案1】：

您需要改用.group(spendPerName)。 DC.js 直接作用于 Crossfilter 组。 group.top（即topSpender）的输出不是组，而是对象数组形式的查询结果。

【讨论】：

tks 但认为这更像是评论而不是答案。我终于解决了
我是用移动设备写的，但如果我没记错的话，这正是你最终得到的答案，不是吗？

【解决方案2】：

这是我的回答，见fiddle

代码：（选项 A 或 B 有效）

spenderRowChart
    .width(250).height(200)
    .dimension(nameDim)
    .group(spendPerName)
    .ordering(function(d) { return -d.value; }) //OPTION A
    .elasticX(true);

//spenderRowChart.ordering(function(d) { return -d.value; }) //OPTION B

此处的类似问题很有帮助：

Sorting (ordering) the bars in a bar chart by the bar values with dc.js

dc.js/crossfilter -> How to sort data in dc.js chart (like row) - Ascending x Descending

【讨论】：