4.1 KiB
4.1 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa7367417b2b2512bc7 | Change Styles Based on Data |
|
6 | Cambiar estilos basados en datos |
Description
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) => {El método
/ * Lógica que devuelve el color basado en una condición * /
});
style()
no se limita a establecer el color
, también se puede usar con otras propiedades CSS. Instructions
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