Explicação do desafio Caleidoscópio
Objetivo do desafio:
Use 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 um deles .attr().
No código com o qual você começa, existe uma declaração de variável incompleta squares e uma animação .transition(). Como a variável squares está incompleta, a .transition() não tem nada para animar e não funciona. Neste desafio, você usará d3.selectAll() para atualizar a variável squares para que a animação seja executada em todos os retângulos.
Para concluir o desafio, anexe .selectAll() ao final de d3 e use 'rect' como argumento. Agora, a animação funciona e cada retângulo terá uma cor diferente.
Solução do código de exemplo:
(Toque abaixo para revelar)
let squares = d3.selectAll('rect');
squares.transition().attr('fill',pickRandom(color));
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%)`);
let s = 20;
for (let i = 1; i < window.innerWidth; i += s) {
for (let j = 1; j < window.innerHeight; j += s) {
parts
.append("rect")
.attr("fill", `hsl(${i*j},100%,50%)`)
.attr("width", s)
.attr("height", s)
.attr("transform", `translate(${i},${j}) rotate(${Math.random() * 90}, ${s / 2}, ${s / 2})`);
}
}
[/details]