La función d3.interpolateCubehelix() en D3.js se usa para devolver la función de interpolación del espacio de color cubehelix. Toma dos colores como parámetro.
Sintaxis:
d3.interpolateCubehelix(a, b);
o
d3.interpolateCubehelix.gamma(k)(a, b);
Parámetros: Toma dos parámetros.
- a: Es el nombre del color de la string de tipo de datos.
- b: También es el nombre del color de tipo string.
Devoluciones: Devuelve la función interpoladora.
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.interpolateCubehelix("blue", "white")))
// Using function d3.interpolateCubehelix()
console.log(
"A RGB string: ", d3.interpolateCubehelix("blue", "white")(0.5))
//using gamma
console.log(
"A RGB string", d3.interpolateCubehelix.gamma(2)("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-bottom: 40px;
color: white;
border: 2px solid black;
width: fit-content;
height: 150px;
}
</style>
<body>
D3.interpolateCubehelix()
<div>
<div class="box1">
d3.interpolateCubehelix.gamma(10)("green", "white")(0.5)
</div>
<div class="box2">
d3.interpolateCubehelix("green", "white")(0.5)
</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");
// Please note the effect of gamma
let color=
d3.interpolateCubehelix.gamma(10)("green", "white")(0.5);
let color2=
d3.interpolateCubehelix("green", "white")(0.5);
// 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:
