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:

