Pourquoi utiliser « selectAll(null) » dans D3.js pour ajouter des éléments ?

Sélection de null : pourquoi utiliser selectAll(null) dans D3 ?

Contexte

Dans D3, il est courant de voir des modèles tels que :

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

Ce code ajoute des éléments au DOM, mais pourquoi selectAll(null) est-il utilisé ? Ne devrait-il pas s'agir de selectAll("circle") ou selectAll("p") pour des éléments spécifiques ?

La sélection Enter

Explication de la sélection "enter" dans D3.js :

Lors de la liaison de données à des éléments, il existe trois scénarios :

1. Nombre égal d'éléments et de données points.
2. Plus d'éléments que de points de données.
3. Plus de points de données que d'éléments.

Dans le scénario n°3, les points de données sans éléments correspondants appartiennent à la zone "entrer " sélection. L'utilisation d'ajouter dans une sélection "Entrée" crée de nouveaux éléments pour les données sans correspondance.

Liaison aux éléments existants

L'extrait proposé var circles = svg.selectAll("circle").data(data ) sélectionne et lie les données aux cercles existants. L'appel enter() suivant gère les points de données sans éléments correspondants.

Utilisation de selectAll(null)

Lorsque l'utilisation de selectAll("circle") fonctionne lorsqu'aucun cercle n'existe, l'utilisation des offres selectAll(null) une garantie cohérente que la sélection « entrée » correspond toujours aux éléments du tableau de données. Cette approche garantit que de nouveaux éléments sont ajoutés pour tous les points de données sans correspondance.

Conclusion

L'exemple ci-dessous montre l'utilisation de selectAll(null) pour ajouter des paragraphes au corps :

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

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!