D3.js - API de sélection

Les sélections sont une puissante transformation basée sur les données du modèle d'objet de document (DOM). Il est utilisé pour définir les attributs, les styles, les propriétés, le contenu HTML ou texte et bien plus encore. Ce chapitre explique en détail l'API des sélections.

Configurer l'API

Vous pouvez configurer l'API directement à l'aide du script ci-dessous.

<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script>

</script>

Méthodes de l'API de sélection

Voici les méthodes les plus importantes de l'API de sélection.

  • d3.selection()
  • d3.select(selector)
  • d3.selectAll(selector)
  • selection.selectAll(selector)
  • selection.filter(filter)
  • selection.merge(other)
  • d3.matcher(selector)
  • d3.creator(name)
  • selection.each(function)
  • selection.call (fonction [, arguments…])
  • d3.local()
  • local.set (nœud, valeur)
  • local.get(node)
  • local.remove(node)

Examinons maintenant chacun de ces éléments en détail.

d3.selection ()

Cette méthode est utilisée pour sélectionner l'élément racine. Cette fonction peut également être utilisée pour tester des sélections ou pour étendre la sélection d3js.

d3.select (sélecteur)

Cette méthode est utilisée pour sélectionner le premier élément qui correspond à la chaîne de sélection spécifiée.

Example - Prenons l'exemple suivant.

var body = d3.select("body");

Si le sélecteur n'est pas une chaîne, il sélectionne le nœud spécifié, qui est défini ci-dessous.

d3.select("p").style("color", "red");

d3.selectAll (sélecteur)

Cette méthode sélectionne tous les éléments qui correspondent à la chaîne de sélection spécifiée.

Example - Prenons l'exemple suivant.

var body = d3.selectAll("body");

Si le sélecteur n'est pas une chaîne, il sélectionne le tableau de nœuds spécifié, qui est défini ci-dessous.

d3.selectAll("body").style("color", "red");

selection.selectAll (sélecteur)

Cette méthode est utilisée pour sélectionner un élément. Il sélectionne les éléments descendants qui correspondent à la chaîne de sélection spécifiée. Les éléments de la sélection renvoyée sont regroupés par leur nœud parent correspondant dans cette sélection. Si aucun élément ne correspond au sélecteur spécifié pour l'élément actuel, ou si le sélecteur est nul, le groupe à l'index actuel sera vide.

Example - Prenons l'exemple suivant.

var b = d3.selectAll("p").selectAll("b");

selection.filter (filtre)

Cette méthode est utilisée pour filtrer la sélection, renvoyant une nouvelle sélection qui contient uniquement les éléments pour lesquels le filtre spécifié est vrai.

Example - Prenons l'exemple suivant.

var even = d3.selectAll("tr").filter(":nth-child(odd)");

Ici, filtrer une sélection de lignes de table ne renvoie que les impairs.

selection.merge (autre)

Cette méthode est utilisée pour renvoyer une nouvelle sélection fusionnant avec l'autre sélection spécifiée.

Example - Prenons l'exemple suivant.

var rect = svg.selectAll("rect").data(data);
rect.enter().append("rect").merge(rect);

d3.matcher (sélecteur)

Cette méthode est utilisée pour affecter le sélecteur spécifié. Il renvoie une fonction, qui renvoie true.

Example - Prenons l'exemple suivant.

var p = selection.filter(d3.matcher("p"));

d3.creator (nom)

Cette méthode est utilisée pour attribuer le nom d'élément spécifié. Elle retourne une fonction, qui crée un élément du nom donné, en supposant qu'il s'agit de l'élément parent.

Example - Prenons l'exemple suivant.

selection.append(d3.creator("p"));

selection.each (fonction)

Cette méthode est utilisée pour appeler la fonction spécifiée pour chaque élément sélectionné, dans l'ordre passé par la donnée courante (d), l'index courant (i) et le groupe courant (nœuds) avec ceci comme élément DOM courant (nœuds [i ]). Cela est expliqué ci-dessous.

parent.each(function(p, j) {
   d3.select(this)
      .selectAll(".child")
      .text(function(d, i) { return "child " + d.name + " of " + p.name; });
});

selection.call (fonction [, arguments…])

Il est utilisé pour appeler la fonction spécifiée une seule fois. La syntaxe est indiquée ci-dessous.

function name(selection, first, last) {
   selection.attr("first-name", first).attr("last-name", last);
}

Cette méthode peut être spécifiée comme indiqué ci-dessous.

d3.selectAll("p").call(name, "Adam", "David");

d3.local ()

D3 local vous permet de définir l'état local qui est indépendant des données.

Example - Prenons l'exemple suivant.

var data = d3.local();

Contrairement à var, la valeur de chaque local est également définie par le DOM.

local.set (nœud, valeur)

Cette méthode définit la valeur de ce local sur le nœud spécifié sur la valeur.

Example - Prenons l'exemple suivant.

selection.each(function(d) 
   { data.set(this, d.value); });
local.get(node)

Cette méthode renvoie la valeur de ce local sur le nœud spécifié. Si le nœud ne définit pas ce local, il renvoie la valeur de l'ancêtre le plus proche qui le définit.

local.remove (nœud)

Cette méthode supprime la valeur de ce local du nœud spécifié. Il renvoie true, si le nœud est défini, sinon renvoie false.