Makahiya pt-br Explainer

Explicação de Makahiya

Objetivo deste desafio: Fazer as caixas desaparecerem quando você toca nelas.
Passo a passo da solução: Na 1ª linha você percebe que a variável rectangles está selecionando todos os círculos. Isso deve ser alterado para 'rect'. O que a função d3.selectAll() faz é encontrar todas as formas de um determinado tipo e armazená-las em uma variável, para que você possa fazer algo com elas mais tarde. Dentro da função é possível ver que está tentando mudar o atributo 'r', mas os retângulos não têm um atributo 'r'. Em vez disso, deveria colocar a 'width' e 'height' como zero. Dessa forma, a transição mostrará os retângulos encolhendo quando a função hideRectangles for executada. E como você consegue que essa função seja executada? Veja a última linha: hideRectangles será executada quando você 'click' .on() rectangles.
Solução do código de exemplo:
(Toque abaixo para revelar)

var rectangles = d3.selectAll('rect');
function hideRectangles() {
  rectangles.transition()
    .attr('width', 0)
    .attr('height',0);
}
rectangles.on('click', hideRectangles);

Conceitos de JavaScript: Bloco de Código (função), Identificadores, Expressão de Membro, Declaração de Variável
Conceitos de D3: .selectAll(), .transition(), .attr(‘width’,), .attr(‘height’,), .on(‘click’,)
Código Adicional (código oculto executado antes do código do desafio):
[detalhes]

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

[/details]