D3.js - API Colors

I colori vengono visualizzati combinando ROSSO, VERDE e BLU. I colori possono essere specificati nei seguenti modi diversi:

  • Dai nomi dei colori
  • Come valori RGB
  • Come valori esadecimali
  • Come valori HSL
  • Come valori HWB

L'API d3-color fornisce rappresentazioni per vari colori. È possibile eseguire operazioni di conversione e manipolazione nell'API. Cerchiamo di capire queste operazioni in dettaglio.

Configurazione dell'API

Puoi caricare direttamente l'API utilizzando il seguente script.

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

</script>

Operazioni di base

Esaminiamo le operazioni di base sui colori in D3.

Convert color value to HSL - Per convertire il valore del colore in HSL, utilizzare quanto segue Example -

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

È possibile ruotare la tonalità di 45 ° come mostrato di seguito.

convert.h + =  45;

Allo stesso modo, puoi modificare anche il livello di saturazione. Per sfumare il valore del colore, è possibile modificare il valore di opacità come mostrato di seguito.

convert.opacity = 0.5;

Metodi API di colore

Di seguito sono riportati alcuni dei più importanti metodi API di colore.

  • 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)

Cerchiamo di comprendere in dettaglio ciascuno di questi metodi API di colore.

d3.color (specificatore)

Viene utilizzato per analizzare il colore CSS specificato e restituire il colore RGB o HSL. Se lo specificatore non viene fornito, viene restituito null.

Example - Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sul nostro schermo:

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

color.opacity

Se vogliamo sfumare il colore, possiamo cambiare il valore di opacità. È nell'intervallo [0, 1].

Example - Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sullo schermo:

1

color.rgb ()

Restituisce il valore RGB per il colore. Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sul nostro schermo.

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

color.toString ()

Restituisce una stringa che rappresenta il colore secondo la specifica del modello di oggetti CSS. Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sul nostro schermo.

rgb(0, 128, 0)

color.displayable ()

Restituisce vero, se il colore è visualizzabile. Restituisce falso se il valore del colore RGB è minore di 0 o maggiore di 255, o se l'opacità non è compresa nell'intervallo [0, 1]. Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sul nostro schermo.

true

d3.rgb (colore)

Questo metodo viene utilizzato per costruire un nuovo colore RGB. Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sullo schermo.

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

d3.hsl (colore)

Viene utilizzato per costruire un nuovo colore HSL. I valori sono esposti come proprietà h, se l sull'istanza restituita. Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sullo schermo.

330
0.5

d3.lab (colore)

Costruisce un nuovo colore Lab. I valori del canale sono esposti come proprietà "l", "a" e "b" sull'istanza restituita.

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

Vedremo la seguente risposta sullo schermo.

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

d3.hcl (colore)

Costruisce un nuovo colore HCL. I valori del canale sono esposti come proprietà h, c e l sull'istanza restituita. Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sullo schermo.

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

d3.cubehelix (colore)

Costruisce un nuovo colore Cubehelix. I valori sono esposti come proprietà h, se l sull'istanza restituita. Consideriamo il seguente esempio.

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

Vedremo la seguente risposta sullo schermo,

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

Esempio di lavoro

Creiamo una nuova pagina web - color.htmlper eseguire tutti i metodi API del colore. L'elenco completo del codice è definito di seguito.

<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>

Ora, richiedi il browser e vedremo la seguente risposta.