The d3.interpolateNumber() Function is used to return the interpolator between two given numbers. It is almost the same as d3.interpolate() function except that it takes only numbers as parameters.
Syntax:
d3.interpolateNumber(a,b);
Parameters: This function accepts two parameters as mentioned above and described below.
- a: It is any number on the number line.
- b: It is any number on the number line.
Return Values: This function returns interpolator between two given numbers.
Below given are a few Examples of d3.interpolateNumber() function
Example 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> Â Â <meta charset="UTF-8"> Â Â <meta name="viewport"Â Â Â Â Â Â Â Â Â content="width=device-width, initial-scale=1.0"> Â Â <title>D3.js d3.interpolateNumber() Function</title> </head> <style> </style> <body> Â Â <!--Fetching from CDN of D3.js -->Â Â <script type = "text/javascript" src =Â Â Â </script> Â Â <script> Â Â Â Â let intr = d3.interpolateNumber(2458,9586) Â Â Â Â 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 the number given is negative and one of them is not a number.
HTML
<!DOCTYPE html> <html lang="en"> <head> Â Â <meta charset="UTF-8"> Â Â <meta name="viewport"Â Â Â Â Â Â Â Â Â content="width=device-width, initial-scale=1.0"> Â Â <title>D3.js d3.interpolateNumber() Function</title> </head> <style> </style> <body> Â Â <!--Fetching from CDN of D3.js -->Â Â <script type = "text/javascript" src =Â Â Â </script> Â Â <script> Â Â Â Â console.log(d3.interpolateNumber(-263,586)(0.2)) Â Â Â Â console.log(d3.interpolateNumber(-263,"green")(0.1)) Â Â Â Â console.log(d3.interpolateNumber("yellow","red")(0.1)) Â Â </script> </body> </html> |
Output:

