La función d3.interpolateGreens() en d3.js se usa para devolver el color correspondiente al esquema de color secuencial de «Verdes». Esta función se utiliza para devolver los diferentes tonos de color verde.
Sintaxis:
d3.interpolateGreens(t);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- t: Es cualquier número en el rango de 0 a 1.
Valores devueltos: esta función devuelve una string RGB.
A continuación se dan algunos ejemplos de la función dada anteriormente.
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 src = "https://d3js.org/d3.v4.min.js"> </script> <script src= "https://d3js.org/d3-color.v1.min.js"> </script> <script src= "https://d3js.org/d3-interpolate.v1.min.js"> </script> <script src= "https://d3js.org/d3-scale-chromatic.v1.min.js"> </script> <script> console.log(d3.interpolateGreens(0)); console.log(d3.interpolateGreens(0.4)); console.log(d3.interpolateGreens(0.2)); console.log(d3.interpolateGreens(0.25)); console.log(d3.interpolateGreens(0.54)); console.log(d3.interpolateGreens(0.85)); console.log(d3.interpolateGreens(2)); console.log(d3.interpolateGreens(1)); </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>
div{
padding:6px;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
width: 90px;
height: 50px;
float: left;
}
</style>
<body>
<h2>D3.interpolateGreens() </h2>
<div class="box1">
<span>
</span>
</div>
<div class="box2">
<span>
</span>
</div>
<div class="box3">
<span>
</span>
</div>
<div class="box4">
<span>
</span>
</div>
<div class="box5">
<span>
</span>
</div>
<!--Fetching from CDN of D3.js -->
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</script>
<script>
// creating different colors for different
// Values of t as 0.1, 0.2...
let color1=
d3.interpolateGreens(0.1);
let color2=
d3.interpolateGreens(0.2);
let color3=
d3.interpolateGreens(0.3);
let color4=
d3.interpolateGreens(0.4);
let color5=
d3.interpolateGreens(0.5);
// Selecting Div using query selector
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
let box3=document.querySelector(".box3");
let box4=document.querySelector(".box4");
let box5=document.querySelector(".box5");
// Setting style and BG color of the particular DIVs
box1.style.backgroundColor=color1;
box2.style.backgroundColor=color2;
box3.style.backgroundColor=color3;
box4.style.backgroundColor=color4;
box5.style.backgroundColor=color5;
</script>
</body>
</html>
Producción:
