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: