La función interpolateHcl() en D3.js se usa para devolver la función de interpolador de espacio de color CIELCh ab entre dos valores de colores. Los dos colores dados están en formato de string y se convierten al formato CIELCh ab usando la función d3.hcl().
Sintaxis:
d3.interpolateHcl(a, b);
Parámetros: Toma los siguientes dos parámetros.
- a: Es la string.
- b: También es una string.
Devoluciones: Devuelve la función interpoladora.
A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 1: En 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>
// Printing the return type of the function
console.log("Type of the function is: ",
typeof(d3.interpolateHcl("green", "yellow")))
// Using function d3.interpolateHcl()
console.log("A RGB string: ",
d3.interpolateHcl("green", "yellow")(0.5))
console.log("A RGB string",
d3.interpolateHcl("green", "white")(0.2))
</script>
</body>
</html>
Producción:
Ejemplo 2: 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>
.box1, .box2{
display: flex;
margin-right: 40px;
border-radius: 50% 50%;
width: 150px;
height: 150px;
}
div{
display: flex;
}
</style>
<body>
D3.interpolateHcl()
<div>
<div class="box1">
</div>
<div class="box2">
</div>
</div>
<!--fetching from CDN of D3.js -->
<script type = "text/javascript"
src = "https://d3js.org/d3.v4.min.js">
</script>
<script>
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
let color=d3.interpolateHcl("green", "yellow")(0.5);
let color2=d3.interpolateHcl("green", "white")(0.2);
// Changing css of the div with class-name box1
box1.style.backgroundColor=color;
// Changing css of the div with class-name box2
box2.style.backgroundColor=color2;
</script>
</body>
</html>
Producción:
