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: