Let There Be Light pt-br Explainer

Puzzle Explainer
#1

Explicação de Haja luz

Objetivo deste desafio: Definir o raio do sun como 20.

Passo a passo da solução: O objeto sun é um círculo SVG. O tamanho de um círculo é determinado por seu raio. Para definir o raio, você usa 'r' como o 1º argumento da chamada .attr(). O 2º argumento será o novo valor do raio, que deveria ser 20.

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

sun.attr('r', 20);

Conceitos de D3: .attr(r,)
Código Adicional (código oculto executado antes do código do desafio):

const xx = window.innerWidth/2;
const yy = window.innerHeight/2;
const planets = [
    'mercury',
    'venus',
    'earth',
    'mars',
    'jupiter',
    'saturn',
    'uranus',
    'neptune'
];
const offset = {
    sun: 0,
    mercury: 57,
    venus: 108,
    earth: 149,
    mars: 228,
    jupiter: 780,
    saturn: 1437,
    uranus: 2871,
    neptune: 4530
};

const rads = {
    sun: 864,
    mercury: 3,
    venus: 7.5,
    earth: 7.9,
    mars: 4.2,
    jupiter: 88.8,
    saturn: 74.9,
    uranus: 31.7,
    neptune: 30.779
};
const colors = {
    sun: '#F3700D',
    mercury: '#868686',
    venus: '#D5C9AA',
    earth: '#374253',
    mars: '#8E543E',
    jupiter: '#C0A476',
    saturn: '#B29D71',
    uranus: '#B2D6EB',
    neptune: '#3C5BE9'
};

let solarSystem = svg.append('g');
for (let item of planets) {
    let rot = `rotate(${pickRandom(360)},${xx},${yy})`;
    let off = 20 + offset[item]**0.52;
    let planet = solarSystem.append('circle')
        .attr('fill',colors[item])
        .attr('cx',xx)
        .attr('cy',yy-off)
        .attr('r',Math.log(rads[item]))
        .attr('transform',rot);
    let trail = solarSystem.append('path')
        .attr('stroke',colors[item])
        .attr('stroke-width',1)
        .attr('fill','none')
        .attr('d',
            d3.arc()
            .innerRadius(off)
            .outerRadius(off)
            .startAngle(0)
            .endAngle((0.5+Math.random())*Math.PI))
        .attr('transform',rot+`translate(${xx},${yy})`);
}
let sun = solarSystem.append('circle').attr('fill','#F3700D').attr('r',0).attr('cx',xx).attr('cy',yy);
1 Like