La función pow.invert() se usa para devolver un valor del dominio cuando se le da un valor del rango. Esta inversión es útil para la interacción, como determinar el valor de datos que corresponde a la posición del mouse.
Sintaxis:
pow.invert( value )
Parámetros: esta función acepta solo un parámetro como se indicó anteriormente y se describe a continuación:
- valor: Es un número que pertenece a cualquier valor en el rango dado.
Valores devueltos: esta función devuelve un número del dominio.
El siguiente programa ilustra la función pow.invert() en D3.js:
Ejemplo 1: Tomar todos los elementos del rango como positivos.
HTML
<!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=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</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>
Producción:
Ejemplo 2: tomar una array de rango de modo que contenga números positivos y negativos.
HTML
<!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=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-color.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-interpolate.v1.min.js">
</script>
<script src=
"https://d3js.org/d3-scale-chromatic.v1.min.js">
</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>
Producción:
