D3.js - Jointure de données

La jointure de données est un autre concept important dans D3.js. Il fonctionne avec les sélections et nous permet de manipuler le document HTML par rapport à notre ensemble de données (une série de valeurs numériques). Par défaut, D3.js donne à l'ensemble de données la priorité la plus élevée dans ses méthodes et chaque élément de l'ensemble de données correspond à un élément HTML. Ce chapitre explique en détail les jointures de données.

Qu'est-ce qu'une jointure de données?

La jointure de données nous permet d'injecter, de modifier et de supprimer des éléments (élément HTML ainsi que des éléments SVG incorporés) en fonction de l'ensemble de données du document HTML existant. Par défaut, chaque élément de données de l'ensemble de données correspond à un élément (graphique) dans le document.

À mesure que l'ensemble de données change, l'élément correspondant peut également être manipulé facilement. La jointure de données crée une relation étroite entre nos données et les éléments graphiques du document. La jonction de données rend la manipulation des éléments basée sur l'ensemble de données un processus très simple et facile.

Comment fonctionne la jointure de données?

L'objectif principal de la jointure de données est de mapper les éléments du document existant avec l'ensemble de données donné. Il crée une représentation virtuelle du document par rapport à l'ensemble de données donné et fournit des méthodes pour travailler avec la représentation virtuelle. Considérons un ensemble de données simple comme indiqué ci-dessous.

[10, 20, 30, 25, 15]

L'ensemble de données comporte cinq éléments et peut donc être mappé à cinq éléments du document. Laissez-nous le mapper auli élément du document suivant en utilisant la méthode selectAll () du sélecteur et la méthode data () de la jointure de données.

HTML

<ul id = "list">
   <li><li>
   <li></li>
</ul>

Code D3.js

d3.select("#list").selectAll("li").data([10, 20, 30, 25, 15]);

Maintenant, il y a cinq éléments virtuels dans le document. Les deux premiers éléments virtuels sont les deuxli élément défini dans le document comme indiqué ci-dessous.

1. li - 10
2. li - 20

Nous pouvons utiliser toutes les méthodes de modification d'élément du sélecteur comme attr(), style(), text(), etc., pour les deux premiers li comme indiqué ci-dessous.

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return d; });

La fonction de la méthode text () est utilisée pour obtenir le liéléments de données mappées. Ici,d représente 10 pour le premier li élément et 20 pour la seconde li élément.

Les trois éléments suivants peuvent être mappés à n'importe quel élément et cela peut être fait en utilisant les méthodes enter () et append () de la jointure de données. La méthode enter () donne accès aux données restantes (qui ne sont pas mappées aux éléments existants) et la méthode append () est utilisée pour créer un nouvel élément à partir des données correspondantes. Laissez-nous créerlipour les autres éléments de données également. La carte des données est la suivante -

3. li - 30
4. li - 25
5. li - 15

Le code pour créer un nouvel élément li est le suivant -

d3.select("#list").selectAll("li")
   .data([10, 20, 30, 25, 15])
   .text(function(d) { return "This is pre-existing element and the value is " + d; })
   .enter()
   .append("li")
   .text(function(d) 
      { return "This is dynamically created element and the value is " + d; });

La jointure de données fournit une autre méthode appelée exit() method pour traiter les éléments de données supprimés dynamiquement de l'ensemble de données comme indiqué ci-dessous.

d3.selectAll("li")
   .data([10, 20, 30, 15])
   .exit()
   .remove()

Ici, nous avons supprimé le quatrième élément de l'ensemble de données et son li correspondant en utilisant les méthodes exit () et remove ().

Le code complet est le suivant -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>

   <body>
      <ul id = "list">
         <li></li>
         <li></li>
      </ul>
        
      <input type = "button" name = "remove" value = "Remove fourth value" 
         onclick = "javascript:remove()" />
      
      <script>
         d3.select("#list").selectAll("li")
            .data([10, 20, 30, 25, 15])
            .text(function(d) 
               { return "This is pre-existing element and the value is " + d; })
            .enter()
            .append("li")
            .text(function(d) 
               { return "This is dynamically created element and the value is " + d; });
             
         function remove() {
            d3.selectAll("li")
            .data([10, 20, 30, 15])
            .exit()
            .remove()
         }
      </script>
   </body>
</html>

Le résultat du code ci-dessus sera le suivant -


Tutoriel D3.js

Licensed under cc by-sa 3.0