dc/crossfilter Reihe Diagramm Datensortierung, die Chart-Feeds

Question

aus diesem Tutorial arbeiten here
hier ist meine Arbeit fiddle

Was ich tun möchte, ist eine Art der Reihenfolge der spenderRowChart (Grafik rechts) von oben nach unten .

Um dies zu tun, erstelle ich ein sortiertes Array var topSpender =spendPerName.top(Infinity); , die, wenn ich si gleichen wie spendPerName richtig topSpender verstehen, aber topSpender würde

hier ist spendPerName für ref sortiert werden:
spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;});

Und dann Pass topSpender auf die spenderRowChart hier

.group(topSpender) 

Aber das funktioniert nicht und ich bekomme den folgenden Fehler. fiddle here

Uncaught TypeError: group.all is not a function

Kann jemand den Fehler meiner Wege korrigieren?

Mehr Code hier

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

das ist meine Antwort finden fiddle

Code: (OPTION A oder B gearbeitet)

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 

ähnliche Fragen hier waren hilfreich:

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

Sie müssen .group(spendPerName) stattdessen tun. DC.js arbeitet direkt auf Crossfilter-Gruppen. Die Ausgabe von group.top (d. H. topSpender) ist keine Gruppe, sondern ein Abfrageergebnis in Form eines Arrays von Objekten.