The d3.continuous.invert() function in D3.js is used to return the corresponding value from the domain if a value from the range is given.
Syntax:
.invert( Value )
Parameters: This function accepts single parameter Value which holds the value of range.
Return Value: This function returns the corresponding value from the domain if a value from the range is given.
Below programs illustrate the d3.continuous.invert() function in D3.js:
Example 1:
<!DOCTYPE html> <html> <head> <title> D3.js | d3.continuous.invert() Function </title> <script src = </script> </head> <body> <script> // Calling scaleLinear() function var x = d3.scaleLinear().domain([10, 150]) .range([0, 1000]); // Calling the .invert() function // and getting the corresponding value // from domain if value from range is given console.log(x.invert(150)); console.log(x.invert(999)); </script> </body> </html> |
Output:
31 149.86
Example 2:
<!DOCTYPE html> <html> <head> <title> D3.js | d3.continuous.invert() Function </title> <script src = </script> </head> <body> <script> // Calling scaleLinear() function var x = d3.scaleLinear().domain([0, 1]) .range([10, 20]); // Calling the .invert() function // and getting the corresponding value // from domain if value from range is given console.log(x.invert(11)); console.log(x.invert(13)); console.log(x.invert(15)); console.log(x.invert(19)); </script> </body> </html> |
Output:
0.1 0.3 0.5 0.9
Reference: https://devdocs.io/d3~5/d3-scale#continuous_invert