D3.js - API de colores

Los colores se muestran combinando ROJO, VERDE y AZUL. Los colores se pueden especificar de las siguientes formas diferentes:

Por nombres de color
Como valores RGB
Como valores hexadecimales
Como valores HSL
Como valores HWB

La API d3-color proporciona representaciones para varios colores. Puede realizar operaciones de conversión y manipulación en API. Entendamos estas operaciones en detalle.

Configuración de API

Puede cargar la API directamente mediante el siguiente script.

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

</script>

Operaciones básicas

Repasemos las operaciones básicas de color en D3.

Convert color value to HSL - Para convertir el valor del color a HSL, use lo siguiente Example -

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

Puede girar el tono 45 ° como se muestra a continuación.

convert.h + =  45;

Del mismo modo, también puede cambiar el nivel de saturación. Para atenuar el valor del color, puede cambiar el valor de opacidad como se muestra a continuación.

convert.opacity = 0.5;

Métodos API de color

A continuación se muestran algunos de los métodos API de color más 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)

Entendamos cada uno de estos métodos de API de color en detalle.

d3.color (especificador)

Se utiliza para analizar el color CSS especificado y devolver el color RGB o HSL. Si no se proporciona el especificador, se devuelve un valor nulo.

Example - Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en nuestra pantalla:

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

color.opacity

Si queremos atenuar el color, podemos cambiar el valor de opacidad. Está en el rango de [0, 1].

Example - Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en la pantalla -

color.rgb ()

Devuelve el valor RGB del color. Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en nuestra pantalla.

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

color.toString ()

Devuelve una cadena que representa el color de acuerdo con la especificación del modelo de objetos CSS. Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en nuestra pantalla.

rgb(0, 128, 0)

color.displayable ()

Devuelve verdadero, si el color es visible. Devuelve falso, si el valor de color RGB es menor que 0 o mayor que 255, o si la opacidad no está en el rango [0, 1]. Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en nuestra pantalla.

true

d3.rgb (color)

Este método se utiliza para construir un nuevo color RGB. Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en pantalla.

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

d3.hsl (color)

Se utiliza para construir un nuevo color HSL. Los valores se exponen como propiedades h, sy l en la instancia devuelta. Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en pantalla.

330
0.5

d3.lab (color)

Construye un nuevo color Lab. Los valores del canal se exponen como propiedades 'l', 'a' y 'b' en la instancia devuelta.

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

Veremos la siguiente respuesta en pantalla.

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

d3.hcl (color)

Construye un nuevo color HCL. Los valores del canal se exponen como propiedades h, cy l en la instancia devuelta. Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en pantalla.

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

d3.cubehelix (color)

Construye un nuevo color Cubehelix. Los valores se exponen como propiedades h, sy l en la instancia devuelta. Consideremos el siguiente ejemplo.

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

Veremos la siguiente respuesta en la pantalla,

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

Ejemplo de trabajo

Creemos una nueva página web - color.htmlpara realizar todos los métodos de la API de color. La lista de códigos completa se define a continuación.

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

Ahora, solicita el navegador y veremos la siguiente respuesta.

↰ Previous page Next page ↱