The d3.interpolatorHslLong() function of D3.js is almost same as interpolateHsl() function, the only difference between the two is that this function does not use the shortest path between two hues.
Syntax:
d3.interpolateHslLong(a, b);
Parameters: It takes two parameters:
- a: It is the name of the color of type string.
- b: It is also the name of the color.
Returns: It returns an interpolator function.
Below given are a few examples of the d3.interpolateHslLong() function.
Example 1: Using the function in 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> </style> <body> <!--fetching from CDN of D3.js --> <script type = "text/javascript" src = </script> <script> // Printing the return type of the function console.log("Type of the function is: ", typeof(d3.interpolateHslLong("green", "yellow"))) console.log( "A RGB string: ", d3.interpolateHslLong("white", "yellow")(0.435)) console.log( "A RGB string", d3.interpolateHslLong("white", "green")(0.888996)) </script> </body> </html> |
Output:
Example 2: Using the function 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> .box1, .box2{ display: flex; margin-right: 10px; width: 100px; height: 100px; } div{ display: flex; } </style> <body> D3.interpolateHslLong() <div> <div class="box1"> </div> <div class="box2"> </div> </div> <!--fetching from CDN of D3.js --> <script type = "text/javascript" </script> <script> let b1=document.querySelector(".box1"); let b2=document.querySelector(".box2"); let color=d3.interpolateHslLong("white", "red", "green")(0.2); let color2=d3.interpolateHslLong("red", "green")(0.8); 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!
… [Trackback]
[…] Info on that Topic: geeksforgeeks.org/d3-js-interpolatehsllong-function/ […]
… [Trackback]
[…] There you will find 4773 more Information on that Topic: geeksforgeeks.org/d3-js-interpolatehsllong-function/ […]