Right On Target pt-br Explainer

Explicação de Direto no alvo

Objetivo deste desafio: Adicionar o círculo da mosca ao alvo

Passo a passo da solução: Para adicionar um novo formato à tela, você usa .append(). O argumento de .append() é uma string que diz que tipo de forma é necessário criar. Neste desafio, deveria ser um 'circle'. Ele deve ter um raio de 30, portanto, defina seu atributo 'r' como 30. Também deve ser colorido de vermelho. Você pode mudar a cor definindo o atributo 'fill'.

Solução do código de exemplo:

(Toque abaixo para revelar)


let outer = svg.append('circle').attr('r',90).attr('fill','red');

let inner = svg.append('circle').attr('r',60).attr('fill','white');

let bullseye = svg.append('circle').attr('r',30).attr('fill','red');

Conceitos de D3: .append(), .attr('fill',), .attr('r',)

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


var svg = canvas.append('g');

svg.attr('transform',`translate(${window.innerWidth/2},${window.innerHeight/2})`);