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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
