D3.js - API Shapes

Ce chapitre traite des différents générateurs de formes dans D3.js.

Configurer l'API

Vous pouvez configurer l'API Shapes à l'aide du script suivant.

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

</script>

Générateurs de formes

D3.js prend en charge différentes formes. Passons en revue les formes importantes en détail.

API Arcs

Le générateur d'arc produit une forme de cercle ou d'anneau. Nous avons utilisé ces méthodes API dans le chapitre précédent sur les graphiques à secteurs. Laissez-nous comprendre les différentes méthodes de l'API Arcs en détail.

  • d3.arc() - Cette méthode est utilisée pour créer un nouveau générateur d'arc.

  • arc(args)- Il est utilisé pour générer un arc avec les arguments donnés spécifiés. Les paramètres par défaut avec les rayons et les angles d'un objet sont définis ci-dessous.

<script>
   var arc = d3.arc();
   arc({
      innerRadius: 0,
      outerRadius: 100,
      startAngle: 0,
      endAngle: Math.PI / 2
   });
</script>

  • arc.centroid(args) - Cette méthode est utilisée pour calculer le milieu [x, y] de la ligne médiane de l'arc avec les arguments spécifiés.

  • arc.innerRadius([radius])- Cette méthode est utilisée pour définir le rayon intérieur à partir du rayon donné et renvoyer un générateur d'arc. Il est défini ci-dessous -

function innerRadius(d) {
   return d.innerRadius;
}

  • arc.outerRadius([radius])- Cette méthode est utilisée pour définir le rayon extérieur à partir du rayon donné et renvoyer un générateur d'arc. Il est défini comme suit.

function outerRadius(d) {
   return d.outerRadius;
}

  • arc.cornerRadius([radius])- Cette méthode est utilisée pour définir le rayon d'angle à partir du rayon donné et renvoyer un générateur d'arc. Il est défini comme suit.

function cornerRadius() {
   return 0;
}

Si le rayon du coin est supérieur à zéro, les coins de l'arc sont arrondis en utilisant les cercles du rayon donné. Le rayon du coin ne doit pas être supérieur à (externalRadius - innerRadius) / 2.

  • arc.startAngle([angle])- Cette méthode est utilisée pour définir l'angle de départ de la fonction à partir de l'angle donné. Il est défini comme suit -

function startAngle(d) {
   return d.startAngle;
}

  • arc.endAngle([angle])- Cette méthode est utilisée pour définir l'angle final de la fonction à partir de l'angle donné. Il est défini comme suit.

function endAngle(d) {
   return d.endAngle;
}

  • arc.padAngle([angle])- Cette méthode est utilisée pour régler l'angle du pad à la fonction à partir de l'angle donné. Il est défini comme suit.

function padAngle() {
   return d && d.padAngle;
}

  • (x) arc.padRadius([radius])- Cette méthode est utilisée pour régler le rayon du pad sur la fonction spécifiée à partir du rayon donné. Le rayon du pad détermine la distance linéaire fixe séparant les arcs adjacents, définie comme padRadius * padAngle.

  • (xi) arc.context([context]) - Cette méthode est utilisée pour définir le contexte et renvoyer un générateur d'arc.

API Pies

Cette API est utilisée pour créer un générateur de tarte. Nous avons effectué ces méthodes API dans le chapitre précédent. Nous discuterons de toutes ces méthodes en détail.

  • d3.pie() - Construit un nouveau générateur de secteurs avec les paramètres par défaut.

  • pie(data[, arguments])- Cette méthode est utilisée pour générer un secteur pour les valeurs de tableau données. Il renvoie un tableau d'objets. Les objets sont les angles d'arc de référence. Chaque objet a les propriétés suivantes -

    • data- la donnée d'entrée; l'élément correspondant dans le tableau de données d'entrée.

    • value - la valeur numérique de l'arc.

    • index - indice de l'arc.

    • startAngle - l'angle de départ de l'arc.

    • endAngle - l'angle final de l'arc.

    • padAngle - l'angle de patin de l'arc.

  • pie.value([value])- Cette méthode est utilisée pour définir la valeur de la fonction spécifiée et génère un secteur. Il est défini comme suit -

function value(d) {
   return d;
}

  • pie.sort([compare])- Cette méthode est utilisée pour trier les données selon la fonction spécifiée et génère un tarte. La fonction comparateur est définie comme suit.

pie.sort(function(a, b) 
   { return a.name.localeCompare(b.name); }
);

Ici, la fonction de comparaison prend deux arguments «a» et «b», chaque élément du tableau de données d'entrée. Si l'arc pour «a» doit être avant l'arc pour «b», alors le comparateur doit renvoyer un nombre inférieur à zéro. Si l'arc pour «a» doit être après l'arc pour «b», alors le comparateur doit renvoyer un nombre supérieur à zéro.

  • pie.sortValues([compare])- Cette méthode est utilisée pour comparer la valeur de la fonction donnée et génère une tarte. La fonction est définie comme suit.

function compare(a, b) {
   return b - a;
}

  • pie.startAngle([angle])- Cette méthode est utilisée pour définir l'angle de départ de la tarte sur la fonction spécifiée. Si l'angle n'est pas spécifié, il renvoie l'angle de départ actuel. Il est défini comme suit.

function startAngle() {
   return 0;
}

  • pie.endAngle([angle])- Cette méthode est utilisée pour définir l'angle de fin de la tarte sur la fonction spécifiée. Si l'angle n'est pas spécifié, il renvoie l'angle de fin actuel. Il est défini comme suit.

function endAngle() {
   return 2 * Math.PI;
}

  • pie.padAngle([angle])- Cette méthode est utilisée pour définir l'angle du tampon sur la fonction spécifiée et génère le graphique à secteurs. La fonction est définie comme suit.

function padAngle() {
   return 0;
}

API Lines

L'API Lines est utilisée pour générer une ligne. Nous avons utilisé ces méthodes API dans leGraphschapitre. Passons en revue chaque méthode en détail.

  • d3.line() - Cette méthode est utilisée pour créer un nouveau générateur de ligne.

  • line(data) - Cette méthode est utilisée pour générer une ligne pour le tableau de données donné.

  • line.x([x])- Cette méthode est utilisée pour définir l'accesseur x sur la fonction spécifiée et génère une ligne. La fonction est définie ci-dessous,

function x(d) {
   return d[0];
}

  • line.y([y])- Cette méthode est utilisée pour définir l'accesseur «y» sur la fonction spécifiée et génère une ligne. La fonction est définie comme suit.

function y(d) {
   return d[1];
}

  • line.defined([defined])- Cette méthode est utilisée pour définir l'accesseur défini sur la fonction spécifiée. Il est défini comme suit.

function defined() {
  return true;
}

  • line.curve([curve]) - Il est utilisé pour définir la courbe et génère la ligne.

  • line.context([context])- Cette méthode est utilisée pour définir le contexte et génère une ligne. Si le contexte n'est pas spécifié, il renvoie null.

  • d3.lineRadial()- Cette méthode est utilisée pour créer une nouvelle ligne radiale; il est équivalent au générateur de lignes cartésiennes.

  • lineRadial.radius([radius])- Cette méthode est utilisée pour dessiner une ligne radiale et l'accesseur renvoie le rayon. Il prend la distance de l'origine (0,0).

Dans le chapitre suivant, nous en apprendrons davantage sur l'API Colors de D3.js.