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