D3js: quand utiliser.datum() et.de données()?
Je vois souvent .datum quand un graphique en Aires est utilisé. Par exemple:
svg = d3.select("#viz").append("svg").datum(data)
Y a-t-il des règles empiriques 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);
3 réponses
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 entrée/sortie lorsque vous faites une sélection. Si c'est le cas, ce qui semble souvent être le cas pour le graphique complet, vous utilisez datum.
Update: Cela dépend: lorsque vous n'attendez aucune mise à jour dynamique, ce qui semble être le cas dans votre exemple donné, le datum est correct. Pourquoi? Parce qu'il n'y a pas encore d'élément Path svg, il n'y a qu'un seul élément path et une fois qu'il est ajouté, il ne changera pas.
Si vous avez 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é), Vous aurez besoin de données. Cela vous donnera trois ensembles: les ensembles d'éléments graphiques pour lesquels aucune donnée n'existe plus, l'ensemble des éléments pour lesquels les données sont mises à jour et de l'ensemble des éléments pour aucun élément de données n'existait auparavant (respectivement, les ensembles Entrée, mise à jour et sortie). Une fois que vous en avez besoin, je vous suggère de lire la documentation d3.
Évidemment, 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 10 de milliers d'éléments).
Un très bon tutoriel avec exemple est ici. http://bost.ocks.org/mike/selection/#data
Autres liés au tutoriel , mais je pense que la référence de L'API sur la sélection.datum donne la réponse acceptée:
Obtient ou définit les données liées pour chaque élément sélectionné. Contrairement à l' sélection.méthode de données, cette méthode ne calcule pas une jointure (et donc ne calcule pas les sélections entrée et sortie).
Comme 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é
- sélection.référence ([valeur])
- sélection.de données([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". C'est-à-dire que le premier est pluriel, le second est singulier. Par conséquent, les données peuvent être jointes de deux façons:
Rejoint à groupes d'éléments via la sélection.données.
Affecté à éléments individuels par sélection.datum.
@Hugolpz ' gist donne de beaux exemples de la signification de "groupes" vs "individus". Ici, json représente un tableau de données. Notez comment datum lie le tableau entier à un élément. Si nous voulons atteindre la même chose avec data nous devons d'abord mettre json dans un autre tableau.
- var graphique = d3.sélectionnez("corps").ajouter ("svg").de données([json])
- graphique var = d3.sélectionnez("corps").ajouter ("svg").données (json)