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