La función d3.interpolateRdPu() en d3.js se usa para devolver un color que corresponde al esquema de color secuencial de «RdPu». El color devuelto por esta función está en formato RGB. Esta función establece una gama de colores entre el rojo y el violeta. Los valores que se dan están entre 0 y 1 ambos inclusive.
Sintaxis:
d3.interpolateRdPu(t);
Parámetros: esta función toma un solo parámetro como se mencionó anteriormente y se describe a continuación:
- t: este parámetro toma un número que se encuentra en el rango [0,1].
Valores devueltos: esta función devuelve una string de colores en formato RGB.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 1:
HTML
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Fetching from CDN of D3.js --> <script src="https://d3js.org/d3.v6.min.js"> </script> </head> <body> <script> console.log(d3.interpolateRdPu(0.1)); console.log(d3.interpolateRdPu(0.2)); console.log(d3.interpolateRdPu(0.3)); console.log(d3.interpolateRdPu(0.4)); console.log(d3.interpolateRdPu(0.8)); console.log(d3.interpolateRdPu(0.9)); console.log(d3.interpolateRdPu(0.6)); console.log(d3.interpolateRdPu(0.254)); </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" />
<!--Fetching from CDN of D3.js -->
<script src="https://d3js.org/d3.v6.min.js">
</script>
<style>
div {
padding: 5px;
text-align: center;
vertical-align: middle;
display: flex;
justify-content: center;
width: fit-content;
height: 50px;
float: left;
}
</style>
</head>
<body>
<h2>D3.interpolateRdPu()</h2>
<div class="box1">
<span>
(0.6)
</span>
</div>
<div class="box2">
<span>
(0.5)
</span>
</div>
<div class="box3">
<span>
(0.4)
</span>
</div>
<div class="box4">
<span>
(0.3)
</span>
</div>
<div class="box5">
<span>
(0.2)
</span>
</div>
<div class="b6">
<span>
(0.1)
</span>
</div>
<script>
// Creating different colors for different
// Values of t as 0.6,0.5...
let color1 = d3.interpolateRdPu(0.6);
let color2 = d3.interpolateRdPu(0.5);
let color3 = d3.interpolateRdPu(0.4);
let color4 = d3.interpolateRdPu(0.3);
let color5 = d3.interpolateRdPu(0.2);
let color6 = d3.interpolateRdPu(0.1);
// 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");
// 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;
</script>
</body>
</html>
Producción:
