La función d3.interpolatorHsl() de D3.js se usa para devolver la función de interpolador de espacio de color HSL de dos colores dados. Los colores que se dan no deben estar en formato HSL.
Sintaxis:
d3.interpolateHsl(a, b);
Parámetros: Toma dos parámetros:
- a: Es un nombre de color, por ejemplo. rojo o verde.
- b: También es un nombre de color, por ejemplo. rojo o verde.
Devoluciones: Devuelve una función interpoladora.
A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 1: Uso de la función en la consola.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<!--fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
console.log("Type of the function is: ",
typeof(d3.interpolateHsl("white", "red")))
console.log(d3.interpolateHsl("white", "red")(0.9))
console.log(d3.interpolateHsl("white", "red")(0.4))
</script>
</body>
</html>
Producción:
Ejemplo 2: Uso de la función en HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 100px;
height: 100px;
}
</style>
<body>
D3.interpolateHsl()
<div class="b1">
</div>
<div class="b2">
</div>
<!--fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
let color=d3.interpolateHsl("white", "green")(0.2);
let color2=d3.interpolateHsl("red", "green")(0.8);
let b1=document.querySelector(".b1");
let b2=document.querySelector(".b2");
b1.style.backgroundColor=color;
b2.style.backgroundColor=color2;
</script>
</body>
</html>
Producción:
