4.1 KiB
4.1 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||
---|---|---|---|---|---|---|---|---|
587d7fa7367417b2b2512bc7 | Change Styles Based on Data |
|
6 | Alterar estilos com base em dados |
Description
style()
para alterar o estilo de diferentes elementos. Por exemplo, você pode querer colorir um ponto de dados azul se tiver um valor menor que 20 e vermelho caso contrário. Você pode usar uma função de retorno de chamada no método style()
e incluir a lógica condicional. A função de retorno de chamada usa o parâmetro d
para representar o ponto de dados: selection.style ("cor", (d) => {O método
/ * Lógica que retorna a cor com base em uma condição * /
});
style()
não se limita a definir a color
- também pode ser usado com outras propriedades CSS. Instructions
style()
ao código no editor para definir a color
dos elementos h2
condicionalmente. Escreva a função de retorno de chamada, portanto, se o valor dos dados for menor que 20, ele retornará "vermelho", caso contrário, retornará "verde". Nota Você pode usar a lógica if-else ou o operador ternário.
Tests
tests:
- text: O primeiro <code>h2</code> deve ter uma <code>color</code> vermelha.
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: O segundo <code>h2</code> deve ter uma <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: O terceiro <code>h2</code> deve ter uma <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: O quarto <code>h2</code> deve ter uma <code>color</code> vermelha.
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: O quinto <code>h2</code> deve ter uma <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: O sexto <code>h2</code> deve ter uma <code>color</code> vermelha.
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: A sétima <code>h2</code> deve ter uma <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: O oitavo <code>h2</code> deve ter uma <code>color</code> vermelha.
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: O nono <code>h2</code> deve ter uma <code>color</code> vermelha.
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