D3.js interpolateHslLong() Function
Last Updated :
23 Jul, 2020
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>
<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>
<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:
Share your thoughts in the comments
Please Login to comment...