2.8 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
587d7fa8367417b2b2512bc9 | Atualizar a altura de um elemento dinamicamente | 6 | 301493 | update-the-height-of-an-element-dynamically |
--description--
Os desafios anteriores tratavam da forma como exibir os dados de um array e como adicionar classes do CSS. Você pode combinar essas lições para criar um gráfico de barras simples. Há duas etapas para isso:
-
Crie uma
div
para cada ponto de dados no array -
Dê a cada
div
uma altura dinâmica usando uma função de callback no métodostyle()
, que define a altura igual ao valor de dado
Lembre-se do formato para definir um estilo usando uma função de callback:
selection.style("cssProperty", (d) => d)
--instructions--
Adicione o método style()
ao código no editor para definir a propriedade height
para cada elemento. Use uma função de callback para retornar o valor do ponto de dados com a string px
adicionada a ele.
--hints--
A primeira div
deve ter uma height
de 12
pixels.
assert($('div').eq(0)[0].style.height === '12px');
A segunda div
deve ter uma height
de 31
pixels.
assert($('div').eq(1)[0].style.height === '31px');
A terceira div
deve ter uma height
de 22
pixels.
assert($('div').eq(2)[0].style.height === '22px');
A quarta div
deve ter uma height
de 17
pixels.
assert($('div').eq(3)[0].style.height === '17px');
A quinta div
deve ter uma height
de 25
pixels.
assert($('div').eq(4)[0].style.height === '25px');
A sexta div
deve ter uma height
de 18
pixels.
assert($('div').eq(5)[0].style.height === '18px');
A sétima div
deve ter uma height
de 29
pixels.
assert($('div').eq(6)[0].style.height === '29px');
A oitava div
deve ter uma height
de 14
pixels.
assert($('div').eq(7)[0].style.height === '14px');
A nona div
deve ter uma height
de 9
pixels.
assert($('div').eq(8)[0].style.height === '9px');
--seed--
--seed-contents--
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// Add your code below this line
// Add your code above this line
</script>
</body>
--solutions--
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style('height', d => `${d}px`)
</script>
</body>