The quantize.invertExtent() function is used to return the extent of values that are present in the domain [x0, x1] for corresponding values that are in the range.
Syntax:
quantile.invertExtent(value);
Parameters: This function takes a single parameter that is given above and described below.
- value: It is a number that corresponds to the domain values.
Return Value: This function returns the extent of the values in the domain.
Example 1:
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" path1tent="width=device-width,         initial-scale=1.0" />     <title>Geeks for neveropen</title>     </script>     </script>     <script src=     </script>     <script src=     </script>       <style>         body {             line-height: 5px;             text-align: center;         }           h2 {             color: green;         }           h3 {             line-height: 10px;         }     </style> </head>   <body>     <h2>Geeks for neveropen</h2>     <p>quantize.invertExtent() Function </p>       <script>         var object = d3.scaleQuantize()               // Value from 10 to 100 decides             // which value to output             .domain([10, 100])               // This should be a number range.             .range([11, 12, 13, 14, 15, 16,                     17, 18, 19, 10, 11, 12]);           document.write("<br/>")         document.write("<h3>This is floating "                 + "number so: "                 + object.invertExtent(14.44)                 + "</h3>");         document.write("<h3>" +             object.invertExtent(14) + "</h3>");         document.write("<h3>" +             object.invertExtent(15) + "</h3>");     </script> </body>   </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" path1tent="width=device-width,         initial-scale=1.0" />     <title>Geeks for neveropen</title>     </script>     </script>     <script src=     </script>     <script src=     </script>       <style>         body {             line-height: 5px;             text-align: center;         }           h2 {             color: green;         }           h3 {             line-height: 10px;         }     </style> </head>   <body>     <h2>Geeks for neveropen</h2>     <p>quantize.invertExtent() Function </p>     <script>         var object = d3.scaleQuantize()               // Value from 1 to 10 decides             // which value to output             .domain([1, 10])             .range([1, 2, 3, 4, 5, 6, 7,                 8, 9, 10, 11, 12]);         document.write("<br/>");           document.write("<h3>" +             object.invertExtent(1) + "</h3>");         document.write("<h3>" +             object.invertExtent(2) + "</h3>");         document.write("<h3>" +             object.invertExtent(3) + "</h3>");         document.write("<h3>" +             object.invertExtent(4) + "</h3>");         document.write("<h3>" +             object.invertExtent(5) + "</h3>");         document.write("<h3>" +             object.invertExtent(6) + "</h3>");         document.write("<h3>" +             object.invertExtent(7) + "</h3>");         document.write("<h3>" +             object.invertExtent(8) + "</h3>");         document.write("<h3>" +             object.invertExtent(9) + "</h3>");         document.write("<h3>" +             object.invertExtent(10) + "</h3>");     </script> </body>   </html> |
Output:

