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);} );