d3.InterpolateRgbBasis() Function is used to return the uniform nonrational B-spline interpolator function of an array of colors given to it that is converted to a RGB color.
Syntax:
d3.interpolateRgbBasis(colors);
Parameters: It takes an array of colors.
Returns: It returns the Interpolator function.
Below given are a few Examples of Interpolate.RgbBasis() function.
Example 1: Printing output 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 >
.b1, .b2{
width: 100px;
height: 100px;
}
</ style >
< body >
< div class = "b1" >
</ div >
< div class = "b2" >
</ div >
<!--Fetching from CDN of D3.js -->
< script type = "text/javascript" src =
</ script >
< script >
console.log("Type of the function is: ",
typeof(d3.interpolateRgbBasis(["red", "white", "blue"])))
console.log(
d3.interpolateRgbBasis(["red", "white", "blue"])(0.5)) console.log(
d3.interpolateRgbBasis(["red", "white", "blue"])(0.2)) </ script >
</ body >
</ html >
|
Output:
Example 2: Using d3.interpolateRgbBasis 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 >
div{
width: 100px;
height: 100px;
}
</ style >
< body >
D3.interpolateRgbBasis()
< div class = "b1" >
</ div >
< div class = "b2" >
</ div >
<!--Fetching from CDN of D3.js -->
< script type = "text/javascript"
src =
</ script >
< script >
// Array of colors is given
let color=
d3.interpolateRgbBasis([ "white", "red", "green"])(0.9); let color2=
d3.interpolateRgbBasis(["red", "white", "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: