Pourquoi utiliser « selectAll(null) » dans D3.js ?

Sélection de null : la logique derrière selectAll(null) dans D3.js

Dans D3.js, vous pouvez rencontrer du code comme ceci pour ajouter des éléments DOM :

var circles = svg.selectAll(null)
    .data(data)
    .enter()
    .append("circle");

Bien qu'il soit courant de sélectionner des éléments spécifiques, tels que "cercle", "p" ou ".foo", la sélection de "null" peut sembler déroutante. Cependant, cette technique garantit que la sélection « Entrée » correspond toujours au tableau de données, avec un élément pour chaque point de données.

La sélection « Entrée »

Une sélection "entrée" comprend des éléments de données qui n'ont pas d'éléments DOM correspondants. D3.js permet de lier des données aux éléments DOM existants. Cependant, s'il y a plus de points de données que d'éléments DOM, les points de données en excès appartiennent à la sélection « entrée ». L'utilisation d'une fonction "ajouter" sur cette sélection crée de nouveaux éléments DOM, en leur liant les données.

Liaison de données aux éléments existants

Traditionnellement, la sélection d'éléments pour la liaison ressemble à ceci :

var circles = svg.selectAll("circle")
    .data(data);

circles.enter()
.append("circle");

Cette approche crée une sélection « mise à jour » pour les éléments de cercle existants, tandis que la sélection « entrée » gère les points de données sans éléments correspondants.

Cependant, qu'il existe ou non des éléments existants, selectAll(null) renvoie une sélection qui représente l'intégralité du tableau de données. Cela garantit que la sélection "Entrée" contiendra toujours l'ensemble de données complet, quel que soit l'état du DOM.

Example

Pour illustrer ce concept, considérons l'exemple suivant :

var body = d3.select("body");
var data = ["red", "blue", "green"];
var p = body.selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(d=> "I am a " + d + " paragraph!")
  .style("color", String);

Même s'il n'y a pas de

éléments initialement, selectAll(null) garantit que la sélection "enter" contient tous les points de données et que des paragraphes sont créés pour eux en conséquence.

En résumé, selectAll(null) fournit un mécanisme cohérent pour garantir que "enter" " La sélection s'aligne toujours sur le tableau de données, ce qui rend la liaison des données simple quel que soit l'état du DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!