D3.js interpolateRgb() Function
Last Updated :
24 Jul, 2020
d3.InterpolateRgb() Function is used to interpolate the two colors and return the interpolator between them with a gamma value that is adjustable.
Syntax:
d3.interpolateRgb(a, b)
Parameters: It takes the two parameters.
- a: It is a color.
- b: It is a color.
Returns: It returns the Interpolator function.
Below given are a few Examples of d3.interpolateRgb() function.
Example 1: Printing color in the console.
<!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 >
< script type = "text/javascript"
src =
</ script >
< script >
console.log("Type of the function is: ",
typeof(d3.interpolateRgb("Red", "blue")));
console.log(d3.interpolateRgb("Red", "blue")(0.2));
console.log(d3.interpolateRgb("Red", "green")(0.2))
</ script >
</ body >
</ html >
|
Output:
Example 2: Displaying color in 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 >
.b1, .b2{
width: 100px;
height: 100px;
}
</ style >
< body >
< div class = "b1" >
</ div >
< div class = "b2" >
</ div >
< script type = "text/javascript"
</ script >
< script >
let color=d3.interpolateRgb(
"white", "green")(0.2);
let color2=d3.interpolateRgb(
"blue", "green")(0.8);
let b1=document.querySelector(".b1");
let b2=document.querySelector(".b2");
b1.style.backgroundColor=color;
b2.style.backgroundColor=color2;
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...