recherche

Maison >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

WBOY
WBOYoriginal
2016-05-16 15:44:551117parcourir

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 e388a4556c0f65e1904146cc1a846bee.

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

"Penser avec les jointures" - par Mike Bostock

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：js implémente la zone de texte de clic pour afficher le code des effets spéciaux du sélecteur de date compétences Sharing_JavascriptArticle suivant：js implémente la zone de texte de clic pour afficher le code des effets spéciaux du sélecteur de date compétences Sharing_Javascript

Articles Liés

Voir plus