La función d3.interpolateRgbBasisClosed() en D3.js se usa para devolver el interpolador B-espinal no racional uniforme a través de una entrada de array que contiene strings de colores.
Sintaxis:
d3.interpolateRgbBasisClosed(values);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- Valores: Es el arreglo de strings de colores.
Valor devuelto: Devuelve un color RGB.
A continuación se dan algunos ejemplos de la función anterior.
Ejemplo 1:
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>
</style>
<body>
<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>
console.log("Type of the function is: ",
typeof(d3.interpolateRgbBasisClosed(["red"])))
console.log(
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.9))
console.log(
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.1))
</script>
</body>
</html>
Producción:
Ejemplo 2:
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>
.bx1,.bx2{
width: 100px;
height: 100px;
}
</style>
<body>
D3.interpolateRgbBasisClosed()
<div class="bx1">
</div>
<div class="bx2">
</div>
<!--Fetching from CDN of D3.js -->
<script type = "text/javascript"
src =
"https://d3js.org/d3.v4.min.js">
</script>
<script>
// Array of colors is given
let color=
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.9);
let color2=
d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.1)
let bx1=document.querySelector(".bx1");
let bx2=document.querySelector(".bx2");
bx1.style.backgroundColor=color;
bx2.style.backgroundColor=color2;
</script>
</body>
</html>
Producción:
