Kaleidoscope pt-br Explainer

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]