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]