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:
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!
