Home
Crearea unei diagrame circulare simple folosind dc.js (Programare, Javascript, D3.Js, Vizualizare De Date, Dc.Js, Crossfilter)

Crearea unei diagrame circulare simple folosind dc.js (Programare, Javascript, D3.Js, Vizualizare De Date, Dc.Js, Crossfilter)

aprilie 6, 2021 Programare
user5279393 a intrebat.

Încerc să creez un număr de diagrame circulare interactive folosind dc.js pentru a reprezenta statisticile unei echipe de baschet. Un grafic cu plăcintă ar avea punctele fiecărui jucător, altul salariul lor, etc., reprezentate ca o parte din totalul echipei.

Nu prea înțeleg cum să folosesc crossfilter-ul. .dimension() și .group() . Și reduceSum() chiar trebuie să fie acolo? Tot ce obțin este un grafic cu plăcintă gol. Alte exemple pe care le-am văzut au date structurate diferit și nu se aplică în această situație.

Iată o parte din codul relevant pentru o diagramă circulară a salariilor:

var data = [
{"player":"boomhauer", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"bill", "rebound_avg":4.2, "salary":3000, "point_avg":20},
{"player":"hank", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"dale", "rebound_avg":16.1, "salary":6000, "point_avg":4},
];

var ndx = crossfilter(data);
var playerDim = ndx.dimension(function(d) {return d.player;});  

var salaryPerPlayer = playerDim.group().reduceSum(function(d) {return d.salary;});

var salaryGroupPerPlayer = salaryPerPlayer.group(function(d) {return d.player; });

var salaryRingChart = dc.pieChart("#chart-ring-salary");

salaryRingChart
        .width(200)
        .height(200)
        .slicesCap(17)
        .innerRadius(10)
        .dimension(salaryPerPlayer)
        .group(salaryGroupPerPlayer)
        .renderLabel(true);


dc.renderAll();

Tot ce obțin este un grafic circular gol.

Vă mulțumesc pentru ajutor!

1 răspunsuri
Ethan Jewett

Cred că trebuie doar să pierdeți salaryGroupPerPlayer:

var data = [
{"player":"boomhauer", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"bill", "rebound_avg":4.2, "salary":3000, "point_avg":20},
{"player":"hank", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"dale", "rebound_avg":16.1, "salary":6000, "point_avg":4},
];

var ndx = crossfilter(data);
var playerDim = ndx.dimension(function(d) {return d.player;});  

var salaryPerPlayer = playerDim.group().reduceSum(function(d) {return d.salary;});

var salaryRingChart = dc.pieChart("#chart-ring-salary");

salaryRingChart
        .width(200)
        .height(200)
        .slicesCap(17)
        .innerRadius(10)
        .dimension(salaryPerPlayer)
        .group(salaryPerPlayer)
        .renderLabel(true);


dc.renderAll();

Aici este un tutorial bun Crossfilter: http://blog.rusty.io/2012/09/17/crossfilter-tutorial/

ReduceSum este necesar pentru că agregarea implicită a unui grup în Crossfilter este o numărătoare. Aceasta ar număra doar numărul de înregistrări pentru fiecare jucător, care este 1. Deci, nu este foarte interesant!

Totuși, m-aș întreba de ce folosiți Crossfilter. Datele sunt toate preagregate și veți avea doar o singură dimensiune (jucător). Filtrarea pe aceste diagrame nu va avea niciun sens. Crossfilter este conceput mai mult pentru scenarii în care aveți date dezagregate (poate 1 înregistrare pentru fiecare jucător din fiecare meci, sau chiar date de joc după joc) și doriți să agregați datele și să filtrați în mod dinamic pe diferite dimensiuni.

Comentarii

  • Vă mulțumim! Aveți dreptate… cred că nu am nevoie de crossfilter pentru acest tip de set de date. Îmi plac piegramele din dc.js, așa că poate voi găsi o modalitate de a le crea fără a folosi crossfilter. Scăpând de salaryGroupPerPlayer, tot rămân cu un piechart gol. Cred că va trebui să mă concentrez cu adevărat asupra crossfilter, dc.js și mapreduce înainte de a mai încerca o dată. Mulțumesc pentru tutorial, voi trece prin el. –  > Por user5279393.
  • dc.js așteaptă doar obiecte cu anumite proprietăți/funcții specifice care furnizează datele care urmează să fie transmise metodelor sale dimension() și group(). IIRC, obiectele de dimensiune au nevoie de filter, , filterExact, , filterRange, , și filterFunction în timp ce obiectele de grup au nevoie de o metodă all (sau, uneori, o metodă top). Dacă le treceți doar obiecte goale și apoi consultați consola de erori, aceasta vă va spune ce metodă lipsește. Mult succes! –  > Por Ethan Jewett.
  • Nu cred că este foarte rău să folosești crossfilter atunci când nu este necesar. S-ar putea să fie puțin mai lent, dar probabil că nu veți observa acest lucru. Cea mai mare parte a costurilor de vizualizare sunt elementele DOM, nu calculele. Deci, poate că este mai ușor să îl folosiți până când aveți un motiv să nu o faceți. –  > Por Gordon.
  • Vă înțeleg punctul de vedere. Dar există probleme structurale pe care le vedeți în acest cod? Încă produce un grafic cu plăcintă gol. Creează o vizualizare, deci trebuie să fim pe drumul cel bun. –  > Por user5279393.
  • @user527939393 Aș fi de acord cu Gordon că utilizarea Crossfilter nu va face rău. Deși API-ul său și staful-ness-ul său poate fi confuz pe cont propriu. În ceea ce privește vizualizarea ta – nu văd nimic în mod special greșit. Poți să creezi un jsFiddle te rog și să ne arăți problema? –  > Por Ethan Jewett.

Tags:, , , ,

Related Posts