La función d3.interpolatorHslLong() de D3.js es casi igual que la función interpolateHsl(), la única diferencia entre las dos es que esta función no usa la ruta más corta entre dos tonos.
Sintaxis:
d3.interpolateHslLong(a, b);
Parámetros: Toma dos parámetros:
- a: Es el nombre del color de tipo string.
- b: También es el nombre del color.
Devoluciones: Devuelve una función interpoladora.
A continuación se ofrecen algunos ejemplos de la función d3.interpolateHslLong().
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>
// Printing the return type of the function
console.log("Type of the function is: ",
typeof(d3.interpolateHslLong("green", "yellow")))
console.log(
"A RGB string: ", d3.interpolateHslLong("white", "yellow")(0.435))
console.log(
"A RGB string", d3.interpolateHslLong("white", "green")(0.888996))
</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>
.box1, .box2{
display: flex;
margin-right: 10px;
width: 100px;
height: 100px;
}
div{
display: flex;
}
</style>
<body>
D3.interpolateHslLong()
<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 b1=document.querySelector(".box1");
let b2=document.querySelector(".box2");
let color=d3.interpolateHslLong("white", "red", "green")(0.2);
let color2=d3.interpolateHslLong("red", "green")(0.8);
b1.style.backgroundColor=color;
b2.style.backgroundColor=color2;
</script>
</body>
</html>
Producción:
