D3.js interpolateRgbBasis() Function
Last Updated :
24 Jul, 2020
d3.InterpolateRgbBasis() Function is used to return the uniform nonrational B-spline interpolator function of an array of colors given to it that is converted to a RGB color.
Syntax:
d3.interpolateRgbBasis(colors);
Parameters: It takes an array of colors.
Returns: It returns the Interpolator function.
Below given are a few Examples of Interpolate.RgbBasis() function.
Example 1: Printing output in the 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>
.b1, .b2{
width: 100px;
height: 100px;
}
</style>
<body>
<div class="b1">
</div>
<div class="b2">
</div>
<script type = "text/javascript"
src =
</script>
<script>
console.log("Type of the function is: ",
typeof(d3.interpolateRgbBasis(["red", "white", "blue"])))
console.log(
d3.interpolateRgbBasis(["red", "white", "blue"])(0.5))
console.log(
d3.interpolateRgbBasis(["red", "white", "blue"])(0.2))
</script>
</body>
</html>
|
Output:
Example 2: Using d3.interpolateRgbBasis 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>
div{
width: 100px;
height: 100px;
}
</style>
<body>
D3.interpolateRgbBasis()
<div class="b1">
</div>
<div class="b2">
</div>
<script type = "text/javascript"
src =
</script>
<script>
// Array of colors is given
let color=
d3.interpolateRgbBasis([ "white", "red", "green"])(0.9);
let color2=
d3.interpolateRgbBasis(["red", "white", "green"])(0.8);
let b1=document.querySelector(".b1");
let b2=document.querySelector(".b2");
b1.style.backgroundColor=color;
b2.style.backgroundColor=color2;
</script>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...