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:
<!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:
<!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>
Output:
