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]