Explicador de Makahiya
Objetivo de este acertijo: Hacer desaparecer los cuadros al pulsarlos.
Tutorial de la solución: En la primera línea verás que la variable rectangles está seleccionando todos los círculos. Eso se debe cambiar a 'rect'. Lo que hace la función d3.selectAll() es buscar todas las formas de un determinado tipo y almacenarlas en una variable para que puedas trabajar con ellas más adelante. Dentro de la función, puedes ver que está intentando cambiar el atributo 'r', pero los rectángulos no tienen un atributo 'r'. En cambio, debe definir 'width' y 'height' en cero. De esta forma, la transición mostrará que los rectángulos se achican cuando se ejecuta la función hideRectangles. Y, ¿cómo logras que esa función se ejecute? Mira la última línea: hideRectangles se ejecutará cuando 'click' .on() (haces clic en) rectangles.
Solución del código de ejemplo:
(Pulsa a continuación para revelar)
var rectangles = d3.selectAll('rect');
function hideRectangles() {
rectangles.transition()
.attr('width', 0)
.attr('height',0);
}
rectangles.on('click', hideRectangles);
Conceptos de JavaScript: bloque de código (función), identificadores, expresión de miembro, declaración de variable
Conceptos de D3: .selectAll(), .transition(), .attr(‘width’,), .attr(‘height’,), .on(‘click’,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):
var parts = svg.append('g');
var color = ['red','orange','yellow','green','blue','indigo','violet','white','pink','lime','dodgerblue'];
var rand = 2.86*Math.random()+0.14;
var n = 100;
for(var i=0; i<n; i+=1) {
parts.append('circle').attr('fill','rgb('+(55-i/2)*3*((i+1)%2)+','+(55-i/2)*7*((i+1)%2)+','+(55-i/2)*4*((i+1)%2) +')').attr('r',(55-i/2)).attr('cx',window.innerWidth/2+50*Math.sin(i*rand)).attr('cy',window.innerHeight/2+50*Math.cos(i*rand));
}
var rate = 0.65;
var rows = 10;
var cols = 15;
var w = window.innerWidth/cols;
var h = window.innerHeight/rows;
for (var i=0; i<rows; i++) {
for (var j=0; j<cols; j++) {
if (Math.random()<rate){
parts.append('rect').attr('fill',pickRandom(['blue','darkblue','dodgerblue'])).attr('stroke','lightblue').attr('width',w-2).attr('height',h-2).attr('x',j*w).attr('y',i*h);
}
}
}
d3.selectAll('circle').on('click', ()=> {d3.selectAll('circle').transition().attr('r',0).duration(1000);} );