Learn D3.js

Entering the moons

The r attribute for each circle is obtained by scaling the diameterKm property and dividing it by two. Since cy is zero, it doesn't need to be set. The cx attribute uses the property calculated in the previous section, which is already scaled.

Since no circles of the moon class exist in the plane, the initial enter selection will contain the same number of elements in the current.moons array:

function draw() {    // ...    // 3) draw the moons    plane.selectAll("circle.moon")        .data(current.moons)        .enter()        .append("circle").attr("class", "moon")        .attr("cx", d => d.cx)        .attr("r", d => scale(d.diameterKm)/2);}

If you comment or remove the red guideline, you should see a representation of the planet and its largest moons to scale, ...