web-dev-qa-db-fra.com

D3js: Quand utiliser .datum () et .data ()?

Je vois souvent .datum lorsqu'un graphique en aires est utilisé. Par exemple:

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

Y a-t-il des règles de base pour quand .datum est nécessaire?

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);
d3.jsnvd3.js
30
Bobby Gifford

Je pense que la documentation donne une bonne réponse à cette question: https://github.com/mbostock/d3/wiki/Selections#wiki-datum .

Fondamentalement, le fait est que dans certains cas, vous n'êtes pas intéressé par les ensembles d'entrée/sortie lorsque vous effectuez une sélection. Si tel est le cas, ce qui semble souvent être le cas pour le graphique complet, vous utilisez des données.

Mise à jour: Cela dépend: lorsque vous ne vous attendez à aucune mise à jour dynamique, ce qui semble être le cas dans votre exemple donné, les données sont correctes. Pourquoi? Puisqu'il n'y a pas encore d'élément svg de chemin, il n'y a qu'un seul élément de chemin et une fois ajouté, il ne changera pas.

Si vous voulez avoir plusieurs éléments de chemin et des changements dynamiques (par exemple, après chaque seconde, l'élément de données le plus ancien est supprimé et un nouveau est ajouté), alors vous avez besoin de données le sera. Cela vous donnera trois ensembles: les ensembles d'éléments graphiques pour lesquels aucune donnée n'existe plus, l'ensemble d'éléments pour lesquels les données sont mises à jour et l'ensemble d'éléments pour lesquels aucune donnée n'existait auparavant (respectivement, l'entrée, la mise à jour et ensembles de sortie). Une fois que vous en avez besoin, je vous suggère de lire la documentation d3.

De toute évidence, le calcul de ces trois ensembles n'est pas sans coût. En pratique, cela ne devrait devenir un problème que lorsque vous travaillez avec des ensembles de données "volumineux" (je pense que d3 peut atteindre 10s de milliers d'éléments).

34
Bertjan Broeksema

Un très bon tutoriel avec exemple est ici. http://bost.ocks.org/mike/selection/#data

9
Vineesh Kalarickal

D'autres liés au tutoriel , mais je pense que le référence API sur selection.datum donne la réponse acceptée:

Obtient ou définit les données liées pour chaque élément sélectionné. Contrairement à la méthode selection.data, cette méthode ne calcule pas une jointure (et donc ne calcule pas les sélections d'entrée et de sortie).

Puisqu'il ne calcule pas une jointure, il n'a pas besoin de connaître une fonction clé. Par conséquent, notez la différence de signature entre les deux, seule la fonction data accepte une fonction clé

  • selection.datum ([valeur])
  • selection.data ([valeurs [ clé]])

Je pense que le tutoriel pour data donne une autre différence plus fondamentale qui est analogue à la signification des mots "data" et "datum". Autrement dit, le premier est pluriel, le second est singulier. Par conséquent, les données peuvent être jointes de deux manières:

Joint à des groupes d'éléments via selection.data.

Attribué aux éléments individuels via selection.datum.

@Hugolpz ' Gist donne de beaux exemples de la signification des "groupes" contre les "individus". Ici, json représente un tableau de données. Remarquez comment datum lie l'ensemble du tableau à un élément. Si nous voulons obtenir la même chose avec data, nous devons d'abord mettre json dans un autre tableau.

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