La función d3.interpolateRdGy() en D3.js es parte del esquema de color divergente que devuelve el color del esquema de color divergente RdBu en D3.js. Aquí Rd se puede interpretar como color rojo y Gy se puede interpretar como color gris.
Sintaxis:
d3.interpolateRdGy(t);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- t: Este es un número que está en el rango 0 y 1 inclusive.
Valores devueltos: la función anterior devuelve la string RGB.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" path1tent="width=device-width, initial-scale=1.0"/> <title>D3.js interpolateRdGy() Function</title> </head> <style></style> <body> <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> // When t is in range [0,1] // Value of t varies as 0.1, 0.2 ....1.0 // Output is RGB string console.log(d3.interpolateRdGy(0)); // When t is 0.0 console.log(d3.interpolateRdGy(0.1)); // When t is 0.1 console.log(d3.interpolateRdGy(0.2)); // When t is 0.2 console.log(d3.interpolateRdGy(0.3)); // When t is 0.3 console.log(d3.interpolateRdGy(0.4)); // When t is 0.4 console.log(d3.interpolateRdGy(0.5)); // When t is 0.5 console.log(d3.interpolateRdGy(0.6)); // When t is 0.6 console.log(d3.interpolateRdGy(0.7)); // When t is 0.7 console.log(d3.interpolateRdGy(0.8)); // When t is 0.8 console.log(d3.interpolateRdGy(0.9)); // When t is 0.9 console.log(d3.interpolateRdGy(1.0)); // When t is 1.0 </script> </body> </html>
Salida: RGB de colores para diferentes valores de t.
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>D3.js interpolateRdGy() Function</title>
</head>
<style>
div {
padding: 5px;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
width: fit-content;
height: 50px;
float: left;
}
</style>
<body>
<h2>D3.interpolateRdGy()</h2>
<div class="box1">
<span>
(0.1)
</span>
</div>
<div class="box2">
<span>
(0.2)
</span>
</div>
<div class="box3">
<span>
(0.3)
</span>
</div>
<div class="box4">
<span>
(0.4)
</span>
</div>
<div class="box5">
<span>
(0.5)
</span>
</div>
<div class="b6">
<span>
(0.6)
</span>
</div>
<div class="b7">
<span>
(0.7)
</span>
</div>
<div class="b8">
<span>
(0.8)
</span>
</div>
<div class="b9">
<span>
(0.9)
</span>
</div>
<div class="b10">
<span style="color: honeydew;">
(1.0)
</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... 1.0
let color1 = d3.interpolateRdGy(0.1);
let color2 = d3.interpolateRdGy(0.2);
let color3 = d3.interpolateRdGy(0.3);
let color4 = d3.interpolateRdGy(0.4);
let color5 = d3.interpolateRdGy(0.5);
let color6 = d3.interpolateRdGy(0.6);
let color7 = d3.interpolateRdGy(0.7);
let color8 = d3.interpolateRdGy(0.8);
let color9 = d3.interpolateRdGy(0.9);
let color10 = d3.interpolateRdGy(1.0);
// 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");
let b6 = document.querySelector(".b6");
let b7 = document.querySelector(".b7");
let b8 = document.querySelector(".b8");
let b9 = document.querySelector(".b9");
let b10 = document.querySelector(".b10");
// 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;
b6.style.backgroundColor = color6;
b7.style.backgroundColor = color7;
b8.style.backgroundColor = color8;
b9.style.backgroundColor = color9;
b10.style.backgroundColor = color10;
</script>
</body>
</html>
Producción:
