freeCodeCamp

4.1 KiB

Raw Blame History

title

required

challengeType

videoUrl

localeTitle

587d7fa7367417b2b2512bc7

Change Styles Based on Data

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

Cambiar estilos basados en datos

Description

D3 es sobre visualización y presentación de datos. Es probable que desee cambiar el estilo de los elementos en función de los datos. Puede usar una función de devolución de llamada en el método style() para cambiar el estilo de los diferentes elementos. Por ejemplo, es posible que desee colorear un punto de datos en azul si tiene un valor inferior a 20 y, de lo contrario, en rojo. Puede usar una función de devolución de llamada en el método style() e incluir la lógica condicional. La función de devolución de llamada utiliza el parámetro d para representar el punto de datos:

selection.style ("color", (d) => {
/ * Lógica que devuelve el color basado en una condición * /
});

El método style() no se limita a establecer el color , también se puede usar con otras propiedades CSS.

Instructions

Agregue el método style() al código en el editor para establecer el color de los elementos h2 condicionalmente. Escriba la función de devolución de llamada de modo que si el valor de los datos es inferior a 20, devuelve "rojo"; de lo contrario, devuelve "verde". Nota
Puede utilizar la lógica if-else o el operador ternario.

Tests

tests:
  - text: El primer <code>h2</code> debe tener un <code>color</code> rojo.
    testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first <code>h2</code> should have a <code>color</code> of red.");'
  - text: El segundo <code>h2</code> debe tener un <code>color</code> verde.
    testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second <code>h2</code> should have a <code>color</code> of green.");'
  - text: El tercer <code>h2</code> debe tener un <code>color</code> verde.
    testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third <code>h2</code> should have a <code>color</code> of green.");'
  - text: El cuarto <code>h2</code> debe tener un <code>color</code> rojo.
    testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth <code>h2</code> should have a <code>color</code> of red.");'
  - text: El quinto <code>h2</code> debe tener un <code>color</code> verde.
    testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth <code>h2</code> should have a <code>color</code> of green.");'
  - text: El sexto <code>h2</code> debe tener un <code>color</code> rojo.
    testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth <code>h2</code> should have a <code>color</code> of red.");'
  - text: El séptimo <code>h2</code> debe tener un <code>color</code> verde.
    testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh <code>h2</code> should have a <code>color</code> of green.");'
  - text: El octavo <code>h2</code> debe tener un <code>color</code> rojo.
    testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth <code>h2</code> should have a <code>color</code> of red.");'
  - text: El noveno <code>h2</code> debe tener un <code>color</code> rojo.
    testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth <code>h2</code> should have a <code>color</code> of red.");'

Challenge Seed

<body>
  <script>
    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

    d3.select("body").selectAll("h2")
      .data(dataset)
      .enter()
      .append("h2")
      .text((d) => (d + " USD"))
      // Add your code below this line



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

Solution

// solution required

4.1 KiB Raw Blame History Unescape Escape