---
id: 587d7fa7367417b2b2512bc7
title: Change Styles Based on Data
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: 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
```yml
tests:
- text: El primer h2
debe tener un color
rojo.
testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first h2
should have a color
of red.");'
- text: El segundo h2
debe tener un color
verde.
testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second h2
should have a color
of green.");'
- text: El tercer h2
debe tener un color
verde.
testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third h2
should have a color
of green.");'
- text: El cuarto h2
debe tener un color
rojo.
testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth h2
should have a color
of red.");'
- text: El quinto h2
debe tener un color
verde.
testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth h2
should have a color
of green.");'
- text: El sexto h2
debe tener un color
rojo.
testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth h2
should have a color
of red.");'
- text: El séptimo h2
debe tener un color
verde.
testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh h2
should have a color
of green.");'
- text: El octavo h2
debe tener un color
rojo.
testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth h2
should have a color
of red.");'
- text: El noveno h2
debe tener un color
rojo.
testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth h2
should have a color
of red.");'
```
## Challenge Seed
## Solution
```js
// solution required
```