freeCodeCamp

5.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa9367417b2b2512bce	Dynamically Set the Coordinates for Each Bar	6		Establecer dinámicamente las coordenadas para cada barra

Description

El último desafío creó y agregó un rectángulo al elemento 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) => {
/ *
* d es el valor del punto de datos
* i es el índice del punto de datos en la matriz
* /
})

Es importante tener en cuenta que NO es necesario escribir un bucle 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

Cambie la función de devolución de llamada del atributo 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

5.3 KiB Raw Blame History