D3.js interpolateRgbBasisClosed() Function
The d3.interpolateRgbBasisClosed() function in D3.js is used to return the uniform non-rational B-spinal interpolator via an input of array that contains strings of colors.
Syntax:
d3.interpolateRgbBasisClosed(values);
Parameters: This function accepts a single parameter as mentioned above and described below:
- Values: It is the array of strings of colors.
Return Value: It returns an RGB color.
Below given are a few examples of the above function.
Example 1:
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> </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.interpolateRgbBasisClosed(["red"]))) console.log( d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.9)) console.log( d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.1)) </script> </body> </html> |
Output:
Example 2:
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> .bx1,.bx2{ width: 100px; height: 100px; } </style> <body> D3.interpolateRgbBasisClosed() <div class="bx1"> </div> <div class="bx2"> </div> <!--Fetching from CDN of D3.js --> <script type = "text/javascript" src = </script> <script> // Array of colors is given let color= d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.9); let color2= d3.interpolateRgbBasisClosed(["blue", "white", "green"])(0.1) let bx1=document.querySelector(".bx1"); let bx2=document.querySelector(".bx2"); bx1.style.backgroundColor=color; bx2.style.backgroundColor=color2; </script> </body> </html> |
Output:
Please Login to comment...