D3.js l'update dans le binding en v. 4 et autres notes

É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 );