3.0 KiB

Raw Blame History

id	title	challengeType	forumTopicId	dashedName
587d7fa7367417b2b2512bc7	Alterar estilos com base nos dados	6	301479	change-styles-based-on-data

--description--

O D3 tem a ver com a visualização e a apresentação dos dados. Você provavelmente vai querer alterar o estilo de elementos com base nos dados. Você pode usar uma função de callback no método style() para mudar a estilização para elementos diferentes.

Por exemplo, pode ser que você queira colorir um ponto dos dados em azul se ele tiver um valor inferior a 20, ou em vermelho se for igual ou superior. Você pode usar uma função de callback no método style() e incluir uma lógica condicional. A função de callback usa o parâmetro d para representar o ponto de dados:

selection.style("color", (d) => {

});

O método style() não é limitado a definir color - ele também pode ser usado com outras propriedades do CSS.

--instructions--

Adicione o método style() ao código no editor para definir color para os elementos h2 de modo condicional. Escreva a função de callback de modo que, se o valor do dado for inferior a 20, ela retornará "red" (vermelho). Do contrário, retornará "green" (verde).

Observação: você pode usar a lógica de if-else ou o operador ternário.

--hints--

O primeiro h2 deve ter color definido como "red".

assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');

O segundo h2 deve ter color definido como "green".

assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');

O terceiro h2 deve ter color definido como "green".

assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');

O quarto h2 deve ter color definido como "red".

assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');

O quinto h2 deve ter color definido como "green".

assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');

O quinto h2 deve ter color definido como "red".

assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');

O sétimo h2 deve ter color definido como "green".

assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');

O oitavo h2 deve ter color definido como "red".

assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');

O nono h2 deve ter color definido como "red".

assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');

--seed--

--seed-contents--

<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>

--solutions--

<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"))
      .style("color", (d) => d < 20 ? "red" : "green")
  </script>
</body>

3.0 KiB Raw Blame History