function update(data) {
var update = svg.selectAll('circle')
.data(data, function (d) { return d })
var enter = update.enter()
.append('circle')
var exit = update.exit()
update.style('fill', 'black')
enter.style('fill', 'green')
exit.style('fill', 'red')
.remove()
update.merge(enter)
.call(pulse)
}
Commençons par sélectionner tous les cercles qui existent dans la page. On le fait même si on sait qu'il n'en existe pas encore, car l'opération permet de créer une sélection vide, dans laquelle on pourra créer les cercles dont on aura besoin.
On indique à D3 quels sont les cercles qu'on veut faire exister, en lui indiquant nos données, sous la forme d'une liste de lettres tirées au hasard entre A et H. Deux remarques : 1. Le second argument est une fonction de clé, qui indique à D3 comment reconnaître un élément d'un appel de la fonction update() à l'autre; dans ce cas, il s'agit simplement de l'identité (la lettre elle-même), mais si les variables d'un élement évoluent au cours du temps, on fournira à la place un identifiant unique. 2. La sélection est modifiée ; les cercles qui existaient déjà et correspondent à des données présentes dans data sont sélectionnés. Ces cercles constituent la variable "update", qui contient la sélection des éléments à mettre à jour.
On affiche dans le coin en haut à gauche les lettres qui figurent dans data, mais qui n'ont pas encore de représentation sur la page. En appelant .enter() sur la variable update, on sélectionne ces cercles non-existants, et puis…
…on crée une représentation pour chacun d'entre eux. Le résultat forme notre sélection des éléments à créer, qui contient chaque élément nouveau n'existait pas avant l'appel à .data().
De la même manière, on va créer une sélection des éléments qui disparaissent, en appelant .exit() sur la variable update. Cette sélection contient tous les cercles qui existent mais ne figurent plus dans les données, et dont il va falloir se débarrasser. En utilisant ces sélections, ce qui s'affiche dans le navigateur reste cohérent avec les données. Ces différentes sélections constituent également un moyen pratique de créer des transitions pour afficher les éléments qui entrent et qui sortent de la page au fur et à mesure des variations dans les données.
Chacune de ces sélections peut être manipulée, soit seule soit en combinaison avec les autres. Montrons par exemple les cercles qui existaient déjà en les coloriant en noir.
Montrons les nouveaux cercles en vert.
Les cercles qui sont sur le point de sortir vont être affichés en rouge.
Ces cercles rouges n'ont pas le droit de rester dans la page, on appelle .remove() pour les supprimer.
Certaines opérations concernent plusieurs sélections, on ne va pas les effectuer indépendamment. En utilisant .merge(), on peut combiner deux sélections. Cela nous permet d'appliquer une opération sur l'ensemble des cercles restants, ceux qui étaient déjà présents et ceux qu'on vient d'ajouter.
Dans cet exemple, on appelle une fonction personnalisée qui provoque une petite pulsation sur l'ensemble des cercles des sélections enter et update. Puis, quand de nouvelles données arrivent, on peut reboucler sur l'ensemble de ce processus.