Nested Circles pt-br Explainer

Explicação de Círculos aninhados

Objetivo deste desafio: Usar um laço for para criar muitos círculos diferentes ao mesmo tempo.

Passo a passo da solução: Neste desafio, um laço for clássico declara a variável size e estabelece seu valor como 300. Depois de cada laço, size diminuirá até 10 e o laço for parará de funcionar quando size não for mais maior do que 0.

Dentro do bloco de código do laço for clássico, svg.append('circle') cria um novo círculo. Cada vez que a iteração de laço for é feita, é criado um novo círculo.

Para concluir o desafio, defina o atributo do raio do círculo para usar o valor da variável size.

Solução do código de exemplo:

(Toque abaixo para revelar)


for (let size = 300; size > 0; size -= 10) {

svg.append('circle').attr('fill', pickRandom(color)).attr('r', size);

}

Conceitos de JavaScript: Laço for clássico, Operador de atribuição de subtração

**Conceitos de D3: SVG, .attr()

Código Adicional (código oculto executado antes do código do desafio):


let color = [...Array(36)].map((_,i)=>`hsl(${10*i},100%,50%)`);