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