La función d3.interpolateHclLong() en D3.js se usa para devolver la función de interpolador de espacio de color CIELCh ab entre dos colores. Es casi lo mismo que la función interpolateHcl() pero la única diferencia entre las dos es que no usa la ruta más corta entre tonos.
Sintaxis:
d3.interpolateHclLong(a, b);
Parámetros: Toma los siguientes dos parámetros.
- a: Es la string de colores.
- b: Es la string de colores. La cantidad de mezcla con el primer color se decide interpolandoHclLong(0<=x<=1)
Nota: Si x=1, una parte de b y 0 parte de a se devuelve en color. Cambie el valor de x y vea diferentes tonos de colores.
Devoluciones: A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 1:
<!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("function type is: ",
typeof(d3.interpolateHclLong("blue", "white")))
// Using function d3.interpolateHclLong()
console.log("A RGB string: ",
d3.interpolateHclLong("blue", "white")(0.5))
console.log("A RGB string",
d3.interpolateHclLong("blue", "white")(0.2))
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!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: 20% 20%;
border: 2px solid black;
width: 150px;
height: 150px;
}
div{
display: flex;
}
</style>
<body>
D3.interpolateHclLong()
<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.interpolateHclLong("green", "white")(0.5);
let color2=d3.interpolateHclLong("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:
