Explicação de Gooool
Objetivo deste desafio: Mover a ball para o goal
Passo a passo da solução: A posição de um círculo é definida por seu centro. A distância do lado esquerdo da tela até o centro é seu atributo 'cx'. A distância da parte superior da tela até o centro do círculo é seu atributo 'cy'.
A ball estará entre o lado esquerdo e direito do goal se seu 'cx' estiver entre 50 e 200. Vamos escolher 125. Para definir o atributo 'cx' da ball, você usa ball.attr('cx',...). Para 'cy', o valor deve estar entre 50 e 100. Vamos usar o 100. ball.attr('cy',100) colocará a ball no fundo do goal.
Você pode optar por encadear as chamadas .attr() em conjunto ou diretamente para ball em uma nova linha. As duas funcionarão desde que você não tente usar ball.attr() acima do let ball = ..., pois a variável precisa ser criada antes de ser usada.
Solução do código de exemplo:
(Toque abaixo para revelar)
let goal = svg.append('rect')
.attr('x' ,25)
.attr('y', 25)
.attr('width', 200)
.attr('height', 100)
.attr('fill', 'white');
let ball = svg.append('circle')
.attr('r', 25)
.attr('fill', 'dodgerblue');
ball.attr('cx', 125)
.attr('cy', 100);
Conceitos de D3: .append(), .attr('cx',), .attr('cy',), .attr('fill',), .attr('height',), .attr(r,), .attr('width',), .attr('x',), .attr('y',), .on('click',...)