Pourquoi utiliser selectAll(null) dans D3.js ?

Sélection de null : qu'est-ce qui se cache derrière selectAll(null) dans D3 ?

D3.js propose une API puissante pour manipuler le DOM, y compris la liaison de données et la sélection d'éléments. Bien que la sélection d'éléments en fonction de balises ou de classes soit courante, l'utilisation de selectAll(null) peut sembler déroutante.

Objectif de selectAll(null)

L'objectif principal de selectAll( null) vise à garantir que la sélection « entrée » s'aligne toujours sur le tableau de données. En d'autres termes, il garantit qu'il y aura un élément dans la sélection pour chaque point de données.

Comprendre la sélection "Entrée"

Quand D3 lie les données au DOM éléments, trois scénarios se présentent :

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

Dans le troisième scénario, les points de données sans éléments DOM correspondants forment la sélection « entrée ». Si une fonction d'ajout est utilisée dans cette sélection, D3 crée de nouveaux éléments et les lie aux données.

Exemple : ajout de cercles

L'extrait proposé pour l'ajout de cercles sélectionne tous les cercles en utilisant selectAll("circle") et les lie aux données. Cependant, s'il n'y a pas de cercles dans la sélection, cette approche n'en créera pas de nouveaux.

Approche selectAll(null)

En revanche, selectAll(null) crée une sélection toujours parallèle au tableau de données. Ainsi, la sélection « entrée » contiendra tous les points de données ne correspondant pas aux éléments existants. Cela garantit que les cercles créés correspondent un à un aux données.

Conclusion

selectAll(null) est un moyen pratique de garantir que la "entrée" la sélection reflète le tableau de données, garantissant une création d’éléments et une liaison de données transparentes. En comprenant son objectif, vous pouvez exploiter efficacement l'approche de manipulation du DOM basée sur les données de D3.

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!