freeCodeCamp

3.9 KiB

Raw Blame History

title

localeTitle

required

challengeType

587d7fa8367417b2b2512bc9

Update the Height of an Element Dynamically

Actualizar la altura de un elemento dinámicamente

src
https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js

Description

Los desafíos anteriores cubrían cómo mostrar datos de una matriz y cómo agregar clases de CSS. Puedes combinar estas lecciones para crear un gráfico de barras simple. Hay dos pasos para esto: 1) Crear un div para cada punto de datos en la matriz 2) Dar a cada div una altura dinámica, utilizando una función de devolución de llamada en el método style() que establece la altura igual al valor de datos Recuperar el formato para establecer un estilo mediante una función de devolución de llamada: selection.style("cssProperty", (d) => d)

Instructions

Agregue el método style() al código en el editor para establecer la propiedad de height para cada elemento. Use una función de devolución de llamada para devolver el valor del punto de datos con la cadena "px" agregada.

Tests

tests:
  - text: El primer <code>div</code> debe tener una <code>height</code> de 12 píxeles.
    testString: 'assert($("div").eq(0).css("height") == "12px", "The first <code>div</code> should have a <code>height</code> of 12 pixels.");'
  - text: El segundo <code>div</code> debe tener una <code>height</code> de 31 píxeles.
    testString: 'assert($("div").eq(1).css("height") == "31px", "The second <code>div</code> should have a <code>height</code> of 31 pixels.");'
  - text: El tercer <code>div</code> debe tener una <code>height</code> de 22 píxeles.
    testString: 'assert($("div").eq(2).css("height") == "22px", "The third <code>div</code> should have a <code>height</code> of 22 pixels.");'
  - text: El cuarto <code>div</code> debe tener una <code>height</code> de 17 píxeles.
    testString: 'assert($("div").eq(3).css("height") == "17px", "The fourth <code>div</code> should have a <code>height</code> of 17 pixels.");'
  - text: El quinto <code>div</code> debe tener una <code>height</code> de 25 píxeles.
    testString: 'assert($("div").eq(4).css("height") == "25px", "The fifth <code>div</code> should have a <code>height</code> of 25 pixels.");'
  - text: El sexto <code>div</code> debe tener una <code>height</code> de 18 píxeles.
    testString: 'assert($("div").eq(5).css("height") == "18px", "The sixth <code>div</code> should have a <code>height</code> of 18 pixels.");'
  - text: El séptimo <code>div</code> debe tener una <code>height</code> de 29 píxeles.
    testString: 'assert($("div").eq(6).css("height") == "29px", "The seventh <code>div</code> should have a <code>height</code> of 29 pixels.");'
  - text: El octavo <code>div</code> debe tener una <code>height</code> de 14 píxeles.
    testString: 'assert($("div").eq(7).css("height") == "14px", "The eighth <code>div</code> should have a <code>height</code> of 14 pixels.");'
  - text: El noveno <code>div</code> debe tener una <code>height</code> de 9 píxeles.
    testString: 'assert($("div").eq(8).css("height") == "9px", "The ninth <code>div</code> should have a <code>height</code> of 9 pixels.");'

Challenge Seed

<style>
  .bar {
    width: 25px;
    height: 100px;
    display: inline-block;
    background-color: blue;
  }
</style>
<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      // Add your code below this line



      // Add your code above this line
  </script>
</body>

Solution

// solution required

3.9 KiB Raw Blame History