Syzygy es-419 Explainer

Explicador de Syzygy

Objetivo de este acertijo: Alinear los círculos y hacer que todos sean del mismo tamaño.

Tutorial de la solución: Para lograr que todos sean del mismo tamaño, solo tienes que definir el radio en el mismo número usando el atributo 'r' a través de una llamada .attr(). La nueva parte es la .transition(). Cuando agregas una .transition() antes de una llamada .attr(), en lugar de cambiar de forma instantánea el atributo al nuevo valor, verás que anima el cambio que hiciste. Si solo agregas .attr('r',35) justo después de .attr('cy', 55), todavía verías una animación, pero la animación 'cy' sucedería al mismo tiempo que la animación 'r'. Eso significa que, en lugar de tres animaciones simples consecutivas, verías la animación 'cx' rápida, luego una animación 'cy' y 'r' combinada.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

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

Conceptos de JavaScript: bloque de código (función), identificadores, expresión de miembro
Conceptos de D3: .transition(), .attr(‘cx’,), .attr(‘cy’,), .attr(‘r’,), .on(‘click’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

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');
1 Like