La función band.domain() en d3.js se usa para establecer el dominio de la escala. El primer valor que está presente en el dominio se asignará a la primera banda en la array de rango y así sucesivamente.
Sintaxis:
band.domain([domain]);
Parámetros: Esta función acepta parámetros individuales como se indica arriba y se describe a continuación.
- dominio: Este parámetro establece el dominio de la escala, es decir, el valor mínimo y máximo.
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>
// Create band scale with domain
// and range
var band = d3.scaleBand()
// Setting domain for the scale
.domain(["redcolor", "greencolor",
"blackcolor", "bluecolor"]);
console.log("band(redcolor): ",
band("redcolor"));
console.log("band(blackcolor): ",
band("blackcolor"));
console.log("band(greencolor): ",
band("greencolor"));
console.log("band(bluecolor): ",
band("bluecolor"));
</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 band scale with
// specified domain and range.
var band = d3.scaleBand()
// Setting domain for the scale
.domain([10, 20, 30, 40])
.range([0, 11]);
console.log("band(10): ", band(10));
console.log("band(20): ", band(20));
console.log("band(30): ", band(30));
console.log("band(40): ", band(40));
</script>
</body>
</html>
Producción:
