5.4 KiB
5.4 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa9367417b2b2512bce | Dynamically Set the Coordinates for Each Bar |
|
6 | Establecer dinámicamente las coordenadas para cada barra |
Description
svg
para que cada punto en el dataset
de dataset
represente una barra. Desafortunadamente, todos estaban apilados uno encima del otro. La colocación de un rectángulo es manejada por los atributos x
e y
. Le dicen a D3 dónde comenzar a dibujar la forma en el área de svg
. El último desafío los puso a 0, por lo que cada barra se colocó en la esquina superior izquierda. Para un gráfico de barras, todas las barras deben estar en el mismo nivel vertical, lo que significa que el valor de y
permanece igual (en 0) para todas las barras. El valor x
, sin embargo, debe cambiar a medida que agrega nuevas barras. Recuerde que los valores de x
más grandes empujan los elementos más hacia la derecha. A medida que recorre los elementos de la matriz en el dataset
de dataset
, el valor de x debería aumentar. El método attr()
en D3 acepta una función de devolución de llamada para establecer dinámicamente ese atributo. La función de devolución de llamada toma dos argumentos, uno para el punto de datos en sí (generalmente d
) y otro para el índice del punto de datos en la matriz. El segundo argumento para el índice es opcional. Aquí está el formato: selection.attr ("propiedad", (d, i) => {Es importante tener en cuenta que NO es necesario escribir un bucle
/ *
* d es el valor del punto de datos
* i es el índice del punto de datos en la matriz
* /
})
for
o usar forEach()
para iterar sobre los elementos del conjunto de datos. Recuerde que el método data()
analiza el conjunto de datos, y cualquier método que se encadene después de que data()
se ejecute una vez para cada elemento en el conjunto de datos. Instructions
x
para que devuelva el índice por 30. Nota Cada barra tiene un ancho de 25, por lo que al aumentar cada valor
x
en 30 se agrega algo de espacio entre las barras. Cualquier valor mayor que 25 funcionaría en este ejemplo. Tests
tests:
- text: El primer <code>rect</code> debe tener un valor <code>x</code> de 0.
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first <code>rect</code> should have an <code>x</code> value of 0.");'
- text: El segundo <code>rect</code> debe tener un valor de <code>x</code> de 30.
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second <code>rect</code> should have an <code>x</code> value of 30.");'
- text: El tercer <code>rect</code> debe tener un valor de <code>x</code> de 60.
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third <code>rect</code> should have an <code>x</code> value of 60.");'
- text: El cuarto <code>rect</code> debe tener un valor de <code>x</code> de 90.
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth <code>rect</code> should have an <code>x</code> value of 90.");'
- text: El quinto <code>rect</code> debe tener un valor de <code>x</code> de 120.
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth <code>rect</code> should have an <code>x</code> value of 120.");'
- text: El sexto <code>rect</code> debe tener un valor de <code>x</code> de 150.
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth <code>rect</code> should have an <code>x</code> value of 150.");'
- text: El séptimo <code>rect</code> debe tener un valor de <code>x</code> de 180.
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh <code>rect</code> should have an <code>x</code> value of 180.");'
- text: El octavo <code>rect</code> debe tener un valor de <code>x</code> de 210.
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth <code>rect</code> should have an <code>x</code> value of 210.");'
- text: El noveno <code>rect</code> debe tener un valor de <code>x</code> de 240.
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth <code>rect</code> should have an <code>x</code> value of 240.");'
Challenge Seed
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => {
// Add your code below this line
// Add your code above this line
})
.attr("y", 0)
.attr("width", 25)
.attr("height", 100);
</script>
</body>
Solution
// solution required