D3.js | d3.continuous.invert() Function

Last Updated : 30 Jul, 2019

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:

javascript

<!DOCTYPE html> <html> <head>  <title>  D3.js | d3.continuous.invert() Function  </title>    <script src =   "https://d3js.org/d3.v4.min.js">  </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:

javascript

<!DOCTYPE html> <html> <head>  <title>  D3.js | d3.continuous.invert() Function  </title>    <script src =   "https://d3js.org/d3.v4.min.js">  </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>