D3.js - Sélections

Les sélections sont l'un des concepts fondamentaux de D3.js. Il est basé sur des sélecteurs CSS. Cela nous permet de sélectionner un ou plusieurs éléments dans une page Web. De plus, cela nous permet de modifier, d'ajouter ou de supprimer des éléments en relation avec l'ensemble de données prédéfini. Dans ce chapitre, nous verrons comment utiliser les sélections pour créer des visualisations de données.

D3.js permet de sélectionner des éléments de la page HTML en utilisant les deux méthodes suivantes -

select()- Sélectionne un seul élément DOM en faisant correspondre le sélecteur CSS donné. S'il y a plus d'un élément pour le sélecteur CSS donné, il sélectionne le premier uniquement.
selectAll()- Sélectionne tous les éléments DOM en faisant correspondre le sélecteur CSS donné. Si vous êtes familiarisé avec la sélection d'éléments avec jQuery, les sélecteurs D3.js sont presque les mêmes.

Passons en revue chacune des méthodes en détail.

La méthode select ()

La méthode select () sélectionne l'élément HTML en fonction des sélecteurs CSS. Dans les sélecteurs CSS, vous pouvez définir et accéder aux éléments HTML des trois manières suivantes:

Balise d'un élément HTML (par exemple div, h1, p, span, etc.,)
Nom de classe d'un élément HTML
ID d'un élément HTML

Voyons-le en action avec des exemples.

Sélection par étiquette

Vous pouvez sélectionner des éléments HTML à l'aide de son TAG. La syntaxe suivante est utilisée pour sélectionner les éléments de balise «div»,

d3.select(“div”)

Example - Créez une page "select_by_tag.html" et ajoutez les modifications suivantes,

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div>
         Hello World!    
      </div>
      
      <script>
         alert(d3.select("div").text());
      </script>
   </body>
</html>

En demandant la page Web via le navigateur, vous verrez la sortie suivante à l'écran -

Sélection par nom de classe

Les éléments HTML stylisés à l'aide de classes CSS peuvent être sélectionnés à l'aide de la syntaxe suivante.

d3.select(“.<class name>”)

Créez une page Web "select_by_class.html" et ajoutez les modifications suivantes -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         alert(d3.select(".myclass").text());
      </script>
   </body>
</html>

En demandant la page Web via le navigateur, vous verrez la sortie suivante à l'écran -

Sélection par ID

Chaque élément d'une page HTML doit avoir un identifiant unique. Nous pouvons utiliser cet identifiant unique d'un élément pour y accéder en utilisant la méthode select () comme spécifié ci-dessous.

d3.select(“#<id of an element>”)

Créez une page Web «select_by_id.html» et ajoutez les modifications suivantes.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div id = "hello">
         Hello World!
      </div>
      
      <script>
         alert(d3.select("#hello").text());
      </script>
   </body>
</html>

En demandant la page Web via le navigateur, vous verrez la sortie suivante à l'écran.

Ajouter des éléments DOM

La sélection D3.js fournit le append() et le text()méthodes pour ajouter de nouveaux éléments dans les documents HTML existants. Cette section explique en détail l'ajout d'éléments DOM.

La méthode append ()

La méthode append () ajoute un nouvel élément en tant que dernier enfant de l'élément dans la sélection actuelle. Cette méthode peut également modifier le style des éléments, leurs attributs, propriétés, contenu HTML et texte.

Créez une page Web "select_and_append.html" et ajoutez les modifications suivantes -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span");
      </script>
   </body>
</html>

En demandant la page Web via le navigateur, vous pouvez voir la sortie suivante à l'écran,

Ici, la méthode append () ajoute une nouvelle étendue de balise à l'intérieur de la balise div comme indiqué ci-dessous -

<div class = "myclass">
   Hello World!<span></span>
</div>

La méthode text ()

La méthode text () est utilisée pour définir le contenu des éléments sélectionnés / ajoutés. Modifions l'exemple ci-dessus et ajoutons la méthode text () comme indiqué ci-dessous.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select("div.myclass").append("span").text("from D3.js");
      </script>
   </body>
</html>

Maintenant, actualisez la page Web et vous verrez la réponse suivante.

Ici, le script ci-dessus effectue une opération de chaînage. D3.js utilise intelligemment une technique appeléechain syntax, dont vous pouvez reconnaître jQuery. En enchaînant des méthodes avec des points, vous pouvez effectuer plusieurs actions dans une seule ligne de code. C'est rapide et facile. Le même script peut également accéder sans syntaxe de chaîne comme indiqué ci-dessous.

var body = d3.select("div.myclass");
var span = body.append("span");
span.text("from D3.js");

Modifier des éléments

D3.js fournit diverses méthodes, html(), attr() et style()pour modifier le contenu et le style des éléments sélectionnés. Voyons comment utiliser les méthodes de modification dans ce chapitre.

La méthode html ()

La méthode html () est utilisée pour définir le contenu html des éléments sélectionnés / ajoutés.

Créez une page Web "select_and_add_html.html" et ajoutez le code suivant.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").html("Hello World! <span>from D3.js</span>");
      </script>
   </body>
</html>

En demandant la page Web via le navigateur, vous verrez la sortie suivante à l'écran.

La méthode attr ()

La méthode attr () est utilisée pour ajouter ou mettre à jour l'attribut des éléments sélectionnés. Créez une page Web "select_and_modify.html" et ajoutez le code suivant.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

En demandant la page Web via le navigateur, vous verrez la sortie suivante à l'écran.

La méthode style ()

La méthode style () est utilisée pour définir la propriété style des éléments sélectionnés. Créez une page Web "select_and_style.html" et ajoutez le code suivant.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.select(".myclass").style("color", "red");
      </script>
   </body>
</html>

En demandant la page Web via le navigateur, vous verrez la sortie suivante à l'écran.

La méthode classed ()

La méthode classed () est exclusivement utilisée pour définir l'attribut «class» d'un élément HTML. Depuis, un seul élément HTML peut avoir plusieurs classes; nous devons être prudents lors de l'affectation d'une classe à un élément HTML. Cette méthode sait gérer une ou plusieurs classes sur un élément, et elle sera performante.

Add class- Pour ajouter une classe, le deuxième paramètre de la méthode classée doit être défini sur true. Il est défini ci-dessous -

d3.select(".myclass").classed("myanotherclass", true);

Remove class- Pour supprimer une classe, le deuxième paramètre de la méthode classée doit être défini sur false. Il est défini ci-dessous -

d3.select(".myclass").classed("myanotherclass", false);

Check class- Pour vérifier l'existence d'une classe, laissez simplement le deuxième paramètre et transmettez le nom de la classe que vous interrogez. Cela renverra vrai, s'il existe, faux, si ce n'est pas le cas.

d3.select(".myclass").classed("myanotherclass");

Cela retournera true, si un élément de la sélection a la classe. Utilisationd3.select pour la sélection d'un seul élément.

Toggle class - Pour retourner une classe à l'état opposé - supprimez-la si elle existe déjà, ajoutez-la si elle n'existe pas encore - vous pouvez effectuer l'une des opérations suivantes.

Pour un seul élément, le code peut ressembler à celui ci-dessous -

var element = d3.select(".myclass")
element.classed("myanotherclass", !oneBar.classed("myanotherclass"));

La méthode selectAll ()

La méthode selectAll () est utilisée pour sélectionner plusieurs éléments dans le document HTML. La méthode select sélectionne le premier élément, mais la méthode selectAll sélectionne tous les éléments qui correspondent à la chaîne de sélection spécifique. Si la sélection ne correspond à aucune, elle renvoie une sélection vide. Nous pouvons enchaîner toutes les méthodes de modification ajoutées,append(), html(), text(), attr(), style(), classed(),etc., dans la méthode selectAll () également. Dans ce cas, les méthodes affecteront tous les éléments correspondants. Comprenons-nous en créant une nouvelle page Web "select_multiple.html" et en ajoutant le script suivant -

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h2 class = "myclass">Message</h2>
      <div class = "myclass">
         Hello World!
      </div>
      
      <script>
         d3.selectAll(".myclass").attr("style", "color: red");
      </script>
   </body>
</html>

En demandant la page Web via le navigateur, vous verrez la sortie suivante à l'écran.

Ici, la méthode attr () s'applique aux deux div et h2 tag et la couleur du texte dans les deux balises devient rouge.

↰ Previous page Next page ↱

D3.js - Sélections

La méthode select ()

Sélection par étiquette

Sélection par nom de classe

Sélection par ID

Ajouter des éléments DOM

La méthode append ()

La méthode text ()

Modifier des éléments

La méthode html ()

La méthode attr ()

La méthode style ()

La méthode classed ()

La méthode selectAll ()

Tutoriel D3.js