freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7fa8367417b2b2512bcd	Create a Bar for Each Data Point in the Set	6		Crear una barra para cada punto de datos en el conjunto

Description

El último desafío agregó solo un rectángulo al elemento svg para representar una barra. Aquí, combinará lo que ha aprendido hasta ahora acerca de las formas de data() , enter() y SVG para crear y anexar un rectángulo para cada punto de dataset en el dataset de dataset . Un desafío anterior mostró el formato de cómo crear y anexar un div para cada elemento en el dataset de dataset :

d3.select ("body"). selectAll ("div")
.data (conjunto de datos)
.entrar()
.append ("div")

Hay algunas diferencias que trabajan con elementos rect lugar de divs . Los rects deben adjuntarse a un elemento svg , no directamente al body . Además, debe indicar a D3 dónde colocar cada rect dentro del área de svg . La colocación de la barra será cubierta en el próximo desafío.

Instructions

Use los métodos data() , enter() y append() para crear y adjuntar un rect para cada elemento en el dataset de dataset . Las barras deben mostrar todas una encima de la otra, esto se solucionará en el próximo desafío.

Tests

tests:
  - text: Su documento debe tener 9 elementos <code>rect</code> .
    testString: 'assert($("rect").length == 9, "Your document should have 9 <code>rect</code> elements.");'
  - text: Su código debe utilizar el método <code>data()</code> .
    testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
  - text: Su código debe utilizar el método <code>enter()</code> .
    testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
  - text: Su código debe utilizar el método <code>append()</code> .
    testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append()</code> method.");'

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")
       // Add your code below this line



       // Add your code above this line
       .attr("x", 0)
       .attr("y", 0)
       .attr("width", 25)
       .attr("height", 100);
  </script>
</body>

Solution

// solution required

3.0 KiB Raw Blame History