D3.js log.invert() Function

Last Updated : 23 Aug, 2020

The log.invert() function returns a value from the domain when a value from the range is given. This inversion is useful for interaction such as determining the data value that corresponds to the position of the mouse.

Syntax:

log.invert(value);

Parameters: This function accepts only one parameter as given above and described below.

value: A number that belongs to any value in the given range.

Return Value: This function returns a number value that lies in the corresponding 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" /> 
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <script> 
        var log = d3.scaleLog() 
            .domain([10, 130]) 
            .range([0, 960]); 
        console.log("log(130):", log(130)); 
        console.log("log.invert(960): ",  
                    log.invert(960)) 
  
        console.log("log(log.invert(15)):",  
                    log(log.invert(960))); 
    </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"/> 
  
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <script> 
        var log = d3.scaleLog() 
            .domain([10, 130, 140]) 
            .range([0, 96, 500]); 
        console.log("log(140):", log(140)); 
          
        console.log("log.invert(500): ",  
                        log.invert(500)) 
  
        console.log("log(log.invert(500)):",  
                        log(log.invert(500))); 
    </script> 
</body> 
  
</html> 