постоянного тока/crossfilter строки диаграммы сортировки данных, которая кормит диаграммы

Question

рабочий из этого учебника here
здесь мой рабочий fiddle

То, что я хочу сделать, это своего рода порядок spenderRowChart (графа справа) сверху вниз ,

Для этого я создаю упорядоченный массив var topSpender =spendPerName.top(Infinity); который, если я правильно понимаю topSpender си так же, как 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(); 

Answer 1

это мой ответ, см 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

Answer 2

Вам нужно сделать .group(spendPerName) вместо этого. DC.js работает непосредственно на группах Crossfilter. Вывод group.top (то есть topSpender) не является группой, но результат запроса представляет собой массив объектов.