Question

从本教程here开始工作这是我的工作fiddle

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

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

这里是spendPerName的ref：
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();

Answer 1

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

Answer 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

dc / crossfilter行图排序数据，用于提供图表

2 个答案: