La función d3.scalepoint() se utiliza para crear y devolver una nueva escala de puntos con un dominio y un rango determinados, sin redondeo, sin relleno y alineación central.
Sintaxis:
d3.scalePoint([[domain, ]range]);
Parámetros: esta función toma dos parámetros, como se indicó anteriormente y se describe a continuación:
- dominio: Define el valor mínimo y máximo para la escala. De forma predeterminada, el dominio contiene una array vacía.
- rango: cada valor en los mapas de dominio con valor en el rango. El rango predeterminado es [0,1].
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>
<script>
// Creating the point scale with
// specified domain and range.
var point = d3.scalePoint()
// Setting domain for the scale
.domain(["red", "green", "black", "blue"])
// Setting the range for the scale.
.range([0.1, 0.2, 0.3, 0.4, 0.5]);
console.log("point(red)", point("red"));
console.log("point(black)", point("black"));
console.log("point(green)", point("green"));
console.log("point(blue)", point("blue"));
</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>
<script>
// Creating the point scale with
// specified domain and range.
var point = d3.scalePoint()
// Setting domain for the scale
.domain([0, 1, 2, 3, 4, 5, 6])
// Setting the range for the scale.
.range([3, 4, 0.5]);
console.log("point(1)", point("1"));
console.log("point(3)", point("3"));
console.log("point(5)", point("5"));
</script>
</body>
</html>
Producción:
