d3.interpolate() Function
Last Updated :
21 Jul, 2020
The Interpolate() function in D3.js is used to interpolate the two given values. In the case of colors, it is used to form a third color from the given two colors.
Syntax:
d3.interpolate(a, b);
Parameters: This function accepts two parameters as mentioned above and describe below.
- a: It is an arbitrary value.
- b: It is an arbitrary value.
Return Values: It returns a function.
Example 1: When colors are given as a parameter.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
</ head >
< body >
< script type = "text/javascript"
</ script >
< script >
let intr = d3.interpolate("red", "green")
console.log("Type of returned function is: ",
typeof (intr));
console.log(intr(0.1))
console.log(intr(1))
console.log(intr(0.4))
</ script >
</ body >
</ html >
|
Output:
Example 2: When number is given as a parameter.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
</ head >
< body >
< script type = "text/javascript"
</ script >
< script >
let intr = d3.interpolate(41, 550)
console.log("Type of returned function is: ",
typeof (intr));
console.log(intr(0.2))
console.log(intr(0.3))
console.log(intr(0.4))
</ script >
</ body >
</ html >
|
Output:
Example 3: When an array is given as parameter:
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
</ head >
< body >
< script type = "text/javascript"
</ script >
< script >
let intr = d3.interpolate(
[19, 33, 2], [1, 12, 10])
console.log("Type of returned function is: ",
typeof (intr));
console.log(intr(0.1))
console.log(intr(1))
console.log(intr(0.4))
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...