La función ordinal.range() en d3.js se usa para establecer el rango de la escala ordinal. Si en el rango hay menos elementos en comparación con los valores del dominio, la escala reutilizará los valores del rango especificado desde el principio.
Sintaxis:
ordinal.range([range]);
Parámetros: Esta función toma solo un parámetro como se indica arriba y se describe a continuación.
- rango: este parámetro acepta una array de valores discretos.
Valores devueltos: esta función no devuelve nada.
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>ordinal.range() Function </p>
<script>
var ordinal = d3.scaleThreshold()
// Setting domain for the scale
.domain([1, 2, 3, 4])
// Range for the scale
.range(["red", "green", "blue"]);
document.write("<h3>ordinal(1): "
+ ordinal(1) + "</h3>");
document.write("<h3>ordinal(3): "
+ ordinal(3) + "</h3>");
</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>ordinal.range() Function </p>
<script>
var ordinal = d3.scaleThreshold()
// Setting domain for the scale
.domain([-2, 3, 4])
// 10 does not lie in the domain
document.write("<h3>ordinal(-3): "
+ ordinal(-3) + "</h3>");
document.write("<h3>ordinal(10): "
+ ordinal(10) + "</h3>");
</script>
</body>
</html>
Producción:
