interface Web
js tutoriel
Explication détaillée des problèmes data(), enter() et exit() dans les compétences D3.js_javascript
Explication détaillée des problèmes data(), enter() et exit() dans les compétences D3.js_javascript
D3 est largement utilisé et est désormais devenu l'un des outils de visualisation de données les plus répandus. Lorsque tout le monde est entré en contact avec d3.js pour la première fois, les parties les plus difficiles étaient les opérations de data(), enter() et exit().
Après avoir été en contact avec lui pendant un certain temps et avoir acquis une certaine compréhension, j'aimerais parler brièvement de ma compréhension.
données()
Regardons d'abord un exemple :
<body> <p></p> <p></p> <p></p> </body>
Code d'exécution :
d3.select("body").selectAll("p").data([1, 2, 3])Ici, data() est utilisé pour lier les données à l'élément DOM sélectionné. De cette façon, vous pouvez effectuer certaines opérations connexes sur les données, telles que définir la largeur de l'élément, etc.
En surface, aucun changement n’est visible. Mais en interne, il ajoute un attribut __data__ à l'élément DOM correspondant, qui peut être vu via document.getElementsByTagName("p")[0].__data__.
enter() et exit()
Ces deux opérations prêtent à confusion car il est difficile de déduire ce qu'elles font à partir de leurs seuls noms.
Dans l'exemple ci-dessus de data(), le nombre de nos éléments DOM et de nos données sont les mêmes. Mais si c'est différent, que devons-nous faire ?
enter() et exit() sont utilisés pour gérer cette situation.
entrer()
Lorsque le nombre de DOM est inférieur au nombre de données, ou qu'il n'y en a pas du tout, nous souhaitons généralement laisser le programme aider à le créer.
Dans l'exemple suivant, nous ne fournissons pas d'éléments DOM à l'avance :
<body> </body>
Toujours exécuté :
d3.select("body").selectAll("p").data([1, 2, 3])La différence avec l'exemple ci-dessus est que dans l'exemple ci-dessus, nous pouvons continuer à effectuer des opérations telles que .style("width", "100px"). Mais nous ne pouvons pas faire cela ici, car nous n'avons pas sélectionné l'élément DOM et devons d'abord le créer.
enter() est utilisé pour sélectionner la partie manquante des éléments DOM après la liaison des données. On peut se demander, puisque c'est la pièce manquante, comment choisir ? Ici, nous devons faire preuve d'un peu d'imagination et imaginer que nous avons choisi quelque chose qui n'existe pas. Nous pouvons l'appeler « DOM virtuel » ou « espace réservé ».
enter() effectue uniquement une sélection et n'ajoute pas réellement les éléments DOM requis. Par conséquent, après enter(), append() est généralement utilisé pour créer l'élément DOM.
À partir de maintenant, nous utilisons d3.select("body").selectAll("p").data([1, 2, 3]).enter().append("p") pour créer automatiquement le éléments DOM requis.
Comment gérer la saisie
S'il n'y a pas assez d'éléments, l'approche habituelle consiste à ajouter des éléments en utilisant append(). Veuillez regarder le code ci-dessous :
<body>
<p></p>
<script>
var dataset = [3, 6, 9];
var p = d3.select("body").selectAll("p");
//绑定数据后，分别获取update和enter部分
var update = p.data(dataset);
var enter = update.enter();
//update部分的处理方法是直接修改内容
update.text( function(d){ return d; } );
//enter部分的处理方法是添加元素后再修改内容
enter.append("p")
.text(function(d){ return d; });
</script>
</body> Dans cet exemple, il n'y a qu'un seul élément p dans le corps, mais il y a trois données, donc la partie entrée contient deux données supplémentaires. La méthode pour traiter les données redondantes est l'élément append, qui lui correspond. Après traitement, il y a trois éléments p dans le corps, dont le contenu est :
<p>3</p> <p>6</p> <p>9</p>
Habituellement, après avoir lu le fichier sur le serveur, les données sont là, mais il n'y a aucun élément dans la page web. Il s'agit d'une fonctionnalité très importante de D3, c'est-à-dire que vous pouvez sélectionner un ensemble vide puis utiliser enter().append() pour insérer des éléments. En supposant qu'il n'y ait plus d'élément p dans le corps maintenant, veuillez consulter le code suivant :
var dataset = [10,20,30,40,50];
var body = d3.select("body");
body.selectAll("p") //选择body中所有p，但由于没有p，所以选择了一个空集
.data(dataset) //绑定dataset数组
.enter() //返回enter部分
.append("p") //添加p元素
.text(function(d){ return d; }); Dans le code ci-dessus, selectAll sélectionne un ensemble vide puis lie les données. Puisque le jeu de sélection est vide, la partie mise à jour renvoyée par data() est vide. Appelez ensuite enter() et append() pour que chaque donnée ait un élément p qui lui correspond. Enfin, modifiez le contenu de l'élément p. Autrement dit, la manière courante de gérer la partie entrée consiste à utiliser append() pour ajouter des éléments.
sortie()
Contrairement à enter(), exit() est utilisé pour sélectionner les éléments DOM qui sont en plus par rapport aux données.
Dans l'exemple suivant, nous fournissons un élément DOM supplémentaire :
<body> <p></p> <p></p> <p></p> <p></p> </body>
Cette fois, c'est facile à comprendre, car c'est extra, alors ça existe réellement, c'est-à-dire le dernier
.
S'il y en a plus, on peut alors utiliser .remove() pour supprimer ces éléments. Le code est le suivant :
d3.select("body").selectAll("p").data([1, 2, 3]).exit().remove();Comment gérer la sortie
Il y a trop d'éléments et aucune donnée qui leur correspond. Pour de tels éléments, l’approche habituelle consiste à utiliser Remove() pour supprimer l’élément. En supposant qu'il y ait 5 éléments p dans le corps, veuillez consulter le code suivant :
var dataset = [10, 20, 30];
var p = d3.select("body").selectAll("p");
//绑定数据之后，分别获取update部分和exit部分
var update = p.data(dataset);
var exit = update.exit();
//update的部分的处理方法是修改内容
update.text( function(d){ return d; } );
//exit部分的处理方法是删除
exit.remove(); Dans ce code, la partie sortie est traitée par suppression. Après la suppression, il n'y aura aucun élément p redondant dans la page Web.
Matériels de référence
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Remplacer les caractères de chaîne en javascript
Mar 11, 2025 am 12:07 AM
Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi
Créez vos propres applications Web Ajax
Mar 09, 2025 am 12:11 AM
Vous voici donc, prêt à tout savoir sur cette chose appelée Ajax. Mais qu'est-ce que c'est exactement? Le terme Ajax fait référence à un regroupement lâche de technologies utilisées pour créer un contenu Web interactif dynamique. Le terme Ajax, inventé à l'origine par Jesse J
Comment créer et publier mes propres bibliothèques JavaScript?
Mar 18, 2025 pm 03:12 PM
L'article discute de la création, de la publication et du maintien des bibliothèques JavaScript, en se concentrant sur la planification, le développement, les tests, la documentation et les stratégies de promotion.
Comment optimiser le code JavaScript pour les performances dans le navigateur?
Mar 18, 2025 pm 03:14 PM
L'article traite des stratégies pour optimiser les performances JavaScript dans les navigateurs, en nous concentrant sur la réduction du temps d'exécution et la minimisation de l'impact sur la vitesse de chargement de la page.
Effets de la matrice jQuery
Mar 10, 2025 am 12:52 AM
Apportez des effets de film de matrice à votre page! Ceci est un plugin jQuery cool basé sur le célèbre film "The Matrix". Le plugin simule les effets de caractère vert classique dans le film, et sélectionnez simplement une image et le plugin le convertira en une image de style matrice remplie de caractères numériques. Venez et essayez, c'est très intéressant! Comment ça marche Le plugin charge l'image sur la toile et lit le pixel et les valeurs de couleur: data = ctx.getImagedata (x, y, settings.grainsize, settings.grainsize) .data Le plugin lit intelligemment la zone rectangulaire de l'image et utilise jQuery pour calculer la couleur moyenne de chaque zone. Ensuite, utilisez
Comment déboguer efficacement le code JavaScript à l'aide d'outils de développeur de navigateur?
Mar 18, 2025 pm 03:16 PM
L'article traite du débogage efficace de JavaScript à l'aide d'outils de développeur de navigateur, de se concentrer sur la définition des points d'arrêt, de l'utilisation de la console et d'analyser les performances.
Comment construire un simple curseur jQuery
Mar 11, 2025 am 12:19 AM
Cet article vous guidera pour créer un carrousel d'image simple à l'aide de la bibliothèque JQuery. Nous utiliserons la bibliothèque BXSLider, qui est construite sur jQuery et offre de nombreuses options de configuration pour configurer le carrousel. De nos jours, Picture Carrousel est devenue une fonctionnalité incontournable sur le site Web - une image vaut mieux que mille mots! Après avoir décidé d'utiliser le carrousel d'image, la question suivante est de savoir comment la créer. Tout d'abord, vous devez collecter des images de haute qualité et haute résolution. Ensuite, vous devez créer un carrousel d'image en utilisant HTML et un code JavaScript. Il existe de nombreuses bibliothèques sur le Web qui peuvent vous aider à créer des carrousels de différentes manières. Nous utiliserons la bibliothèque BXSLider open source. La bibliothèque Bxslider prend en charge la conception réactive, de sorte que le carrousel construit avec cette bibliothèque peut être adapté à n'importe quel
Comment télécharger et télécharger des fichiers CSV avec Angular
Mar 10, 2025 am 01:01 AM
Les ensembles de données sont extrêmement essentiels pour créer des modèles d'API et divers processus métier. C'est pourquoi l'importation et l'exportation de CSV sont une fonctionnalité souvent nécessaire. Dans ce tutoriel, vous apprendrez à télécharger et à importer un fichier CSV dans un
