The pow.invert() function is used to return a value from the domain when given a value from the range. This inversion is useful for interaction such as determining the data value that corresponds to the position of the mouse.
Syntax:
pow.invert( value )
Parameters: This function accepts only one parameter as given above and described below:
- value: It is a number that belongs to any value in the given range.
Return Values: This function returns a number from the domain.
The program below illustrates the pow.invert() function in D3.js:
Example 1: Taking all elements of range to be positive.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
< title >GeeksforGeeks</ title >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 style = "color: green" >GeeksforGeeks</ h2 >
< p >pow.invert() Function </ p >
< script >
var pow = d3.scalePow()
.domain([0, 1])
.range([1, 2, 3, 4, 5, 6]);
document.write("< h3 > pow.invert(1): " +
pow.invert(1) + "</ h3 >");
document.write("< h3 >pow.invert(2): " +
pow.invert(2) + "</ h3 >");
document.write("< h3 >pow.invert(3): " +
pow.invert(3) + "</ h3 >");
document.write("< h3 > pow(pow.invert(1)): " +
pow(pow.invert(1)) + "</ h3 >");
document.write("< h3 >pow(pow.invert(2)): " +
pow(pow.invert(2)) + "</ h3 >");
document.write("< h3 >pow(pow.invert(3)): " +
pow(pow.invert(3)) + "</ h3 >");
</ script >
</ body >
</ html >
|
Output:
Example 2: Taking a range array such that it contains positive and negative numbers both.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0" />
< title >GeeksforGeeks</ title >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< h2 style = "color: green" >GeeksforGeeks</ h2 >
< p >pow.invert() Function </ p >
< script >
var pow = d3.scalePow()
.domain([-1, 1])
.rangeRound([10, 20, 30, 40, 50, 60])
.exponent(2);
document.write("< h3 > pow.invert(1): " +
pow.invert(1) + "</ h3 >");
document.write("< h3 >pow.invert(2): " +
pow.invert(2) + "</ h3 >");
document.write("< h3 >pow.invert(3): " +
pow.invert(3) + "</ h3 >");
document.write("< h3 > pow(pow.invert(-1)): " +
pow(pow.invert(-1)) + "</ h3 >");
document.write("< h3 >pow(pow.invert(-2)): " +
pow(pow.invert(-2)) + "</ h3 >");
document.write("< h3 >pow(pow.invert(-1)): " +
pow(pow.invert(-3)) + "</ h3 >");
</ script >
</ body >
</ html >
|
Output: