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:
Share your thoughts in the comments
Please Login to comment...