Évolution de l'update
Après liaison de données via .data(), l'ordre des instructions importe en version 3 pour mettre à jour des éléments pré-existants. Cette sélection est en effet enrichie de la création d'éléments via .enter(). L'update doit donc précéder .enter().
En version 4 désormais, la mise à jour devient autonome et n'est plus affectée par .enter(). Elle peut être effectuée en instruction finale.
Le traitement simultané des éléments mis à jour et créés se fait avec .merge() :
Dans la documentation : d3/CHANGES.md at master · d3/d3.
Exemple de merge.
Au sujet de .enter() et .exit()
La sélection .enter() après liaison, est bornée par l'ensemble des données ;
la sélection .exit() l'est par celui de la sélection initiale :
enter()._groups[0].length == dataset.length; exit()._groups[0].length == selection.length;
(en prenant comme 'dataset' un tableau…)
Comparaison des longueurs :
Dans la sélection enter(), les items définis correspondent aux surplus des données sur la sélection :
enter()._groups[0].filter(val => val).length == // item définis dataset.length >= selection.length ? dataset.length - selection.length // avec surplus : 0; // sans surplus
Réciproquement, dans la sélection exit(), les éléments définis correspondent au dépassement de la sélection sur les données :
exit()._groups[0].filter(val => val).length == // item définis selection.length >= dataset.length ? selection.length - dataset.length // avec surplus : 0; // sans surplus
"key function"
Comparaison de jeux hétérogènes - dans cette démo des opérations de "join" :
// objet en cours de liaison comparé à un tableau déjà lié .data(data, d => d.cle || d );
Comparaison entre un jeu et du contenu - dans la documentation indiquée ci-dessus :
.data(data, d => d || this.textContent );
Aucun commentaire:
Enregistrer un commentaire