Syzygy pt-br Explainer

Explicação de Syzygy

Objetivo deste desafio: Alinhar os círculos e fazê-los todos do mesmo tamanho.

Passo a passo da solução: Para fazer todos os círculos do mesmo tamanho, basta definir o raio com o mesmo número usando o atributo 'r' através de uma chamada .attr(). A nova parte é a .transition(). Ao adicionar uma .transition() antes de uma chamada .attr(), em vez de alterar instantaneamente o atributo para o novo valor, verá a animação da mudança que fez. Se você simplesmente adicionar um .attr('r',35) logo após o .attr('cy', 55), ainda verá uma animação, mas a animação 'cy' aconteceria ao mesmo tempo que a animação 'r'. Isso significa que, em vez de três animações simples em uma linha, você veria a animação rápida 'cx', depois uma animação combinada 'cy' e 'r'.

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

function moveCircles() {
  circles.transition()
      .attr('cx', 55)
    .transition()
      .attr('cy', 55)
    .transition()
      .attr('r', 35);
}
circles.on('click', moveCircles);

Conceitos de JavaScript: Bloco de Código (função), Identificadores, Expressão de Membro
Conceitos de D3: .transition(), .attr(‘cx’,), .attr(‘cy’,), .attr(‘r’,), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

for (let i=0; i<10; i++) {    
    let rad = 55-5*i;
    svg.append('circle')
        .attr('r',rad)
        .attr('cx',rad+Math.random()*(window.innerWidth-rad*2))
        .attr('cy',rad+Math.random()*(window.innerHeight-rad*2))
        .attr('fill',`rgb(${rad*3},${rad*4},${rad*5})`);
}

var circles = d3.selectAll('circle');

[/details]