La función Threshold.range() se utiliza para establecer el rango de la escala de umbral. El número de valores en la array de rango es siempre uno mayor que la array de dominio, de lo contrario, el comportamiento de la escala puede no estar definido.
Sintaxis:
threshold.range([range]);
Parámetros: esta función acepta un solo parámetro como se indicó anteriormente y se describe a continuación.
- rango: este parámetro acepta una array de valores discretos. Si hay «n» número de valores en el dominio, el rango debe tener «n+1» número de valores.
Valor devuelto: esta función no devuelve ningún valor.
Ejemplo 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>
<h2 style="color:green;">GeeksforGeeks</h2>
<p>threshold.range() Function </p>
<script>
var threshold = d3.scaleThreshold()
// Setting domain for the scale.
.domain([10, 20, 30, 40])
// Setting the range for the scale.
// Number of elements is one more
// then domain array size.
.range(["red", "blue",
"green", "yellow", "white"]);
document.write("<h4>"
+ threshold(10) + "</h4>");
document.write("<h4>"
+ threshold(20) + "</h4>");
</script>
</body>
</html>
Producción:
Ejemplo 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>
<h2 style="color:green;">GeeksforGeeks</h2>
<p>threshold.range() Function </p>
<script>
var threshold = d3.scaleThreshold()
// Setting domain for the scale.
.domain([10, 20, 30, 40])
// Setting the range for the scale.
// Number of elements is one more
// then domain array size.
.range([0.01, 0.02, 0.03, 0.04, 0.05]);
document.write("<h4>"
+ threshold(20) + "</h4>"); // 0.03
document.write("<h4>"
+ threshold(40) + "</h4>"); // 0.05
// This value is outside the domain
document.write("<h4>"
+ threshold(500) + "</h4>"); // 0.05
</script>
</body>
</html>
Producción:
