Hole In The Wall pt-br Explainer

Explicação de Buraco na parede

Objetivo deste desafio: Mudar a localização do tijolo de ouro para preencher o buraco

Passo a passo da solução: O brick é um retângulo. A posição de um retângulo é determinada por seu canto superior esquerdo. A distância do lado esquerdo da tela é seu valor 'x'. A distância da parte superior da tela é seu valor 'y'. Para mover o brick 2 linhas, é necessário aumentar o valor 'y'.

Cada tijolo tem 25 de altura, portanto, descer 2 tijolos significa aumentar 'y' em 50. Depois, para mover o tijolo 2 espaços à direita, é necessário aumentar 'x' no equivalente a 2 larguras do tijolo. Cada tijolo tem 50 de largura, portanto 2 tijolos à direita são 100.

Solução do código de exemplo:
(Toque abaixo para revelar)

let brick = svg.append('rect')
                 .attr('fill', 'gold')
                 .attr('width', 50)
                 .attr('height', 25)
                 .attr('x', 100)
                 .attr('y', 50);

Conceitos de D3: .append(), .attr('fill',), .attr('height',), .attr('width',), .attr('x',), .attr('y',)

Código Adicional (código oculto executado antes do código do desafio):

// Mais um tijolo na parede

let brickW = 50;
let brickH = 25;
for (let i = 0; i <= 400/brickH; i++) {
    for (let j = 0; j <= 400/brickW; j++) {
        svg.append('rect').attr('width', brickW).attr('height',brickH).attr('fill',`rgb(${178+30*(Math.random()-0.5)},${34+20*(Math.random()-0.5)},${34+20*(Math.random()-0.5)})`).attr('stroke','white').attr('x',(j-0.5*(i%2))*brickW).attr('y',i*brickH);
    }
}

d3.selectAll('rect').attr('opacity', (d,i)=> i===20?0:1);