D3.js - API Colors

Les couleurs sont affichées en combinant ROUGE, VERT et BLEU. Les couleurs peuvent être spécifiées des différentes manières suivantes -

  • Par noms de couleurs
  • En tant que valeurs RVB
  • En tant que valeurs hexadécimales
  • En tant que valeurs HSL
  • En tant que valeurs HWB

L'API d3-color fournit des représentations pour différentes couleurs. Vous pouvez effectuer des opérations de conversion et de manipulation dans l'API. Comprenons ces opérations en détail.

Configurer l'API

Vous pouvez charger directement l'API à l'aide du script suivant.

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

</script>

Opérations de base

Passons en revue les opérations de couleur de base dans D3.

Convert color value to HSL - Pour convertir la valeur de la couleur en HSL, utilisez ce qui suit Example -

var convert = d3.hsl("green");

Vous pouvez faire pivoter la teinte de 45 ° comme indiqué ci-dessous.

convert.h + =  45;

De même, vous pouvez également modifier le niveau de saturation. Pour atténuer la valeur de couleur, vous pouvez modifier la valeur d'opacité comme indiqué ci-dessous.

convert.opacity = 0.5;

Méthodes API couleur

Voici quelques-unes des méthodes API de couleur les plus importantes.

  • d3.color(specifier)
  • color.opacity
  • color.rgb()
  • color.toString()
  • color.displayable()
  • d3.rgb(color)
  • d3.hsl(color)
  • d3.lab(color)
  • d3.hcl(color)
  • d3.cubehelix(color)

Laissez-nous comprendre chacune de ces méthodes API de couleur en détail.

d3.color (spécificateur)

Il est utilisé pour analyser la couleur CSS spécifiée et renvoyer la couleur RVB ou HSL. Si le spécificateur n'est pas donné, la valeur null est renvoyée.

Example - Prenons l'exemple suivant.

<script>
   var color = d3.color("green");  // asign color name directly
   console.log(color);
</script>

Nous verrons la réponse suivante sur notre écran -

{r: 0, g: 128, b: 0, opacity: 1}

color.opacity

Si nous voulons estomper la couleur, nous pouvons changer la valeur d'opacité. Il est de l'ordre de [0, 1].

Example - Prenons l'exemple suivant.

<script>
   var color = d3.color("green");
   console.log(color.opacity);
</script>

Nous verrons la réponse suivante à l'écran -

1

color.rgb ()

Il renvoie la valeur RVB de la couleur. Prenons l'exemple suivant.

<script>
   var color = d3.color("green");
   console.log(color.rgb());
</script>

Nous verrons la réponse suivante sur notre écran.

{r: 0, g: 128, b: 0, opacity: 1}

color.toString ()

Il renvoie une chaîne représentant la couleur selon la spécification du modèle d'objet CSS. Prenons l'exemple suivant.

<script>
   var color = d3.color("green");
   console.log(color.toString());
</script>

Nous verrons la réponse suivante sur notre écran.

rgb(0, 128, 0)

color.displayable ()

Renvoie true, si la couleur est affichable. Renvoie false, si la valeur de couleur RVB est inférieure à 0 ou supérieure à 255, ou si l'opacité n'est pas dans la plage [0, 1]. Prenons l'exemple suivant.

<script>
   var color = d3.color("green");
   console.log(color.displayable());
</script>

Nous verrons la réponse suivante sur notre écran.

true

d3.rgb (couleur)

Cette méthode est utilisée pour construire une nouvelle couleur RVB. Prenons l'exemple suivant.

<script>
   console.log(d3.rgb("yellow"));
   console.log(d3.rgb(200,100,0));
</script>

Nous verrons la réponse suivante à l'écran.

{r: 255, g: 255, b: 0, opacity: 1}
{r: 200, g: 100, b: 0, opacity: 1}

d3.hsl (couleur)

Il est utilisé pour construire une nouvelle couleur TSL. Les valeurs sont exposées en tant que propriétés h, s et l sur l'instance renvoyée. Prenons l'exemple suivant.

<script>
   var hsl = d3.hsl("blue");
   console.log(hsl.h + =  90);
   console.log(hsl.opacity = 0.5);
</script>

Nous verrons la réponse suivante à l'écran.

330
0.5

d3.lab (couleur)

Il construit une nouvelle couleur Lab. Les valeurs de canal sont exposées en tant que propriétés «l», «a» et «b» sur l'instance renvoyée.

<script>
   var lab = d3.lab("blue");
   console.log(lab);
</script>

Nous verrons la réponse suivante à l'écran.

{l: 32.29701093285073, a: 79.18751984512221, b: -107.8601617541481, opacity: 1}

d3.hcl (couleur)

Construit une nouvelle couleur HCL. Les valeurs de canal sont exposées en tant que propriétés h, c et l sur l'instance renvoyée. Prenons l'exemple suivant.

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

Nous verrons la réponse suivante à l'écran.

{h: 306.2849380699878, c: 133.80761485376166, l: 32.29701093285073, opacity: 1}

d3.cubehelix (couleur)

Construit une nouvelle couleur Cubehelix. Les valeurs sont exposées en tant que propriétés h, s et l sur l'instance renvoyée. Prenons l'exemple suivant.

<script>
   var hcl = d3.hcl("blue");
   console.log(hcl);
</script>

Nous verrons la réponse suivante à l'écran,

{h: 236.94217167732103, s: 4.614386868039719, l: 0.10999954957200976, opacity: 1}

Exemple de travail

Créons une nouvelle page Web - color.htmlpour exécuter toutes les méthodes de l'API de couleur. La liste complète des codes est définie ci-dessous.

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

   <body>
      <h3>D3 colors API</h3>
      <script>
         var color = d3.color("green");
         console.log(color);
         console.log(color.opacity);
         console.log(color.rgb());
         console.log(color.toString());
         console.log(color.displayable());
         console.log(d3.rgb("yellow"));
         console.log(d3.rgb(200,100,0));
         var hsl = d3.hsl("blue");
         console.log(hsl.h + =  90);
         console.log(hsl.opacity = 0.5);
         var lab = d3.lab("blue");
         console.log(lab);
         var hcl = d3.hcl("blue");
         console.log(hcl);
         var cube = d3.cubehelix("blue");
         console.log(cube);
      </script>
   </body>
</html>

Maintenant, demandez le navigateur et nous verrons la réponse suivante.