Let There Be Light es-419 Explainer

Explicador de Que se haga la luz

Objetivo de este acertijo: Definir el radio de sun como 20.

Tutorial de la solución: El object sun es un círculo SVG. El radio determina el tamaño de un círculo. Para definir el radio, debes usar 'r' como el primer argumento de la llamada .attr(). El segundo argumento será el nuevo valor del radio, que debe ser 20.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

sun.attr('r', 20);

Conceptos de D3: .attr(r,)
Código adicional (código oculto que se ejecuta antes del código del acertijo):

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