Mandala pt-br Explainer

Explicação do desafio Mandala

Objetivo do desafio:
Usar o método d3.selectAll() para definir um atributo em todas as ocorrências de um tipo de forma.

Passo a passo da solução:
O método d3.selectAll() seleciona todas as ocorrências de um tipo de forma. Por exemplo, d3.selectAll('circle') seleciona cada círculo e d3.selectAll('rect') seleciona cada retângulo. Uma vez selecionadas todas as ocorrências de uma forma, é possível definir todos os seus atributos usando .attr().

No código com o qual você começa, existe uma declaração de variável dots incompleta e uma animação .transition(). Como a variável dots está incompleta, a .transition() não tem nada para animar e não será executada. Neste desafio, você usará d3.selectAll() para atualizar a variável dots para que a animação seja executada em todos os círculos.

Para concluir o desafio, anexe .selectAll() ao final de d3 e use 'circle' como argumento. Agora, a animação funciona e todos os círculos ficam maiores.

Solução do código de exemplo:
(Toque abaixo para revelar)

let dots = d3.selectAll('circle');
dots.transition().attr('r',20);

Conceitos de JavaScript: Variável
Conceitos de D3: Atributo, .transition(), d3.selectAll()
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

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

const n = 230;
for (var i = 3; i < n; i++) {
  parts
    .append('circle')
    .attr('fill', `hsl(${3 * i},100%,50%)`)
    .attr('r', 2)
    .attr('cx', window.innerWidth / 2 + i * Math.sin(i))
    .attr('cy', window.innerHeight / 2 + i * Math.cos(i));
}

[/details]