Get The Popcorn es-419 Explainer

Explicador de Obtén las palomitas de maíz

Objetivo de este acertijo: Animar el radio y y rellenar los cambios de color usando .transition()

Tutorial de la solución: Para animar un cambio de atributo, debes usar .transition(). El orden de .transition() y .attr() es importante. Las llamadas de .attr() deben ir después de .transition(), pero deben seguir estando adjuntas. De esta forma: kernels.transition().attr().attr().

NO esto:

kernels.transition();
kernels.attr();
kernels.attr().transition()

Eso significa que debes seleccionar kernels dentro del bloque de código {}, y luego agregar .transition(). Eso adjuntará .transition() directamente a kernels para que quede antes de las llamadas .attr().

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

function heatUp() {
  kernels.transition().attr('r', 30).attr('fill', 'white');
}
kernels.on('click', heatUp);

Conceptos de JavaScript: bloque de código (función)

Conceptos de D3: .attr('r',), .attr('fill',), .on('click',...), .transition()
Código adicional (código oculto que se ejecuta antes del código del acertijo):

function gauss(scale,iter=6) {
    return scale*Array(iter).fill().map(i=>Math.random()).reduce((a,c)=>a+c)/iter;
}

for (let i=0; i<50; i++) {
    svg.append('circle')
.attr('r',8)
.attr('cx',gauss(window.innerWidth))
.attr('cy',gauss(window.innerHeight))
.attr('fill','#E89800')
.attr('stroke','grey')
.attr('stroke-width',0.2);
}

let kernels = d3.selectAll('circle');
1 Like