D3js: Când se utilizează .datum() și .data()? (Programare, D3.Js, Nvd3.Js)

Bobby Gifford a intrebat.

Văd adesea .datum când se folosește o diagramă de suprafață. De exemplu:

svg = d3.select("#viz").append("svg").datum(data)

Există vreo regulă generală pentru când .datum este necesară?

var area = d3.svg.area()  
    .x(function(d) { return x(d.x); })  
    .y0(height)  
    .y1(function(d) { return y(d.y); });  

var svg = d3.select("body").append("svg")  
    .attr("width", width)  
    .attr("height", height);  

svg.append("path") 
    .datum(data)
    .attr("d", area); 

Comentarii

  • O perspectivă utilă în jurul acestui subiect poate fi găsită în acest alt subiect –  > Por Aurelio.
3 răspunsuri
Bertjan Broeksema

Cred că documentația oferă un răspuns bun la această întrebare: https://github.com/mbostock/d3/wiki/Selections#wiki-datum.

Practic, ideea este că, în unele cazuri, nu vă interesează seturile de intrare/ieșire atunci când faceți o selecție. Dacă acesta este cazul, ceea ce pare a fi adesea cazul pentru graficul complet, utilizați datum.

Actualizare: Depinde: atunci când nu vă așteptați la actualizări dinamice, ceea ce pare a fi cazul în exemplul dat, datum este în regulă. De ce? Pentru că nu există încă un element svg de traseu, există doar un singur element de traseu și, odată adăugat, nu se va schimba.

Dacă doriți să aveți mai multe elemente de traseu și modificări dinamice (de exemplu, după fiecare secundă, cel mai vechi element de date este eliminat și se adaugă unul nou), atunci trebuie să va fi aveți nevoie de date. Astfel, veți avea trei seturi: seturile de elemente grafice pentru care nu mai există date, setul de elemente pentru care datele sunt actualizate și setul de elemente pentru care nu a existat niciun element de date înainte (respectiv, seturile de intrare, actualizare și ieșire). Odată ce aveți nevoie de acest lucru, vă sugerez să citiți documentația d3.

Evident, calcularea acestor trei seturi nu este lipsită de costuri. În practică, acest lucru ar trebui să devină o problemă doar atunci când lucrați cu seturi de date „mari” (cred că d3 scalează până la zeci de mii de elemente).

Comentarii

  • Mulțumesc, pentru răspuns. Am adăugat mai mult cod pentru o diagramă de bază cu zone. Presupun că nu îmi este clar de ce în acest caz folosesc .datum în loc de .data. Sunt sigur că o mai bună înțelegere a D3 este răspunsul! și asta urmăresc. –  > Por Bobby Gifford.
  • Dacă ar fi să aveți un singur element de traseu și modificări dinamice, ar trebui să folosesc data sau datum? De exemplu, dacă am o diagramă cu linii, dar doar o singură linie în diagramă, ar trebui să folosesc date? –  > Por Qian Chen.
Vineesh Kalarickal

Un tutorial foarte bun cu un exemplu este aici. http://bost.ocks.org/mike/selection/#data

Mazăre roșu

Alții au făcut legătura cu tutorial, dar cred că referință API privind selection.datum oferă răspunsul acceptat:

Obține sau stabilește datele legate pentru fiecare element selectat. Spre deosebire deselection.data metoda, această metodă nu calculează o îmbinare (și, prin urmare, nu calculează selecții de intrare și ieșire).

Deoarece nu calculează o îmbinare, nu trebuie să cunoască o funcție cheie. Prin urmare, observați diferența de semnătură dintre cele două, numai că data acceptă o funcție cheie

  • selection.datum([value])
  • selection.data([values[, key]])

Cred că tutorialul pentru data oferă o altă diferență mai elementară, care este analogă cu semnificația cuvintelor „data” și „datum”. Aceasta este, „date” este la plural, „datum” este la singular. Prin urmare, datele pot fi alăturate în două moduri:

Alăturat la grupuri de elemente prin selection.data.

Atribuite la individuale elemente prin selection.datum.

@Hugolpz gist oferă exemple frumoase de semnificație a „grupurilor” vs. „indivizilor”. Aici, json reprezintă o matrice de date. Observați cum datum leagă întreaga matrice de un singur element. Dacă dorim să obținem același lucru cu data trebuie mai întâi să punem json în interiorul unui alt array.

  • var chart = d3.select("body").append("svg").data([json])
  • var chart = d3.select("body").append("svg").datum(json)