d3.js radially position elements around an object - d3.js

Question

I'm currently stuck at a problem with d3.js regarding the positioning.
This is the code I have right now
var center = {name: "sun", count: 20 }; //Will have more complex data in the future
var planets = [
{name: "Mercury", count: 2},
{name: "Venus", count: 3} ,
{name: "Earth", count: 5},
{name: "Mars", count: 4},
{name: "Jupiter", count: 11},
{name: "Saturn", count: 10},
{name: "Uranus", count: 7},
{name: "Neptune", count: 8} ];
var svg = d3.select("#planet-chart").append("svg")
.attr("width", 800)
.attr("height", 800);
var circleContainer = svg.selectAll("g mySolarText")
.data(planets);
var circleContainerEnter = circleContainer.enter()
.append("g")
.attr("transform", function(d,i){
return "translate("+ i*10 +",80)"
});
var circle = circleContainerEnter.append("circle")
.attr("r", function(d){return d.count * 5} )
.attr("cx", function(d,i){return (i+1) * 30} )
.attr("cy", function(d,i){return (i+1) * 30} )
.attr("stroke","black")
.attr("fill", "white");
circleContainerEnter.append("text")
.attr("dx", function(d){return -20})
.text(function(d){
return d.name}
);
Issues I am having right now are:
Currently, I can only pass the planets variable into the circle container, but I wish to also include the sun variable into it but I do not know how. I cannot simply include the sun variable into the planets array variable because I will need to put more data into it in the future.
I am having a hard time trying to figure out how to radially position the
planets around the sun, and add connecting lines to them which I am hoping to do. I have tried looking into arc but I am stuck.
For now, the sizes of the planets are being adjusted with their count values which I just multiply with the radius. Forgive me I am just a student and wish to learn more about d3 js. If you guys can help me, I would be so much grateful. Or if you can lead me to references I would be so much indebted.
Thank you so much in advance.

Answer 1

#tomshanley helped me via d3 official help forums. he posted this code for the fix to the issues I was encountering.
http://blockbuilder.org/tomshanley/840d381a9ca87ab404f63adda1ba8452
const radians = 0.0174532925
var center = {name: "sun", count: 20 };
var planets = [
{name: "Mercury", count: 2},
{name: "Venus", count: 3} ,
{name: "Earth", count: 5},
{name: "Mars", count: 4},
{name: "Jupiter", count: 11},
{name: "Saturn", count: 10},
{name: "Uranus", count: 7},
{name: "Neptune", count: 8} ];
var w = 800, h = 800;
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
let orbitRadius = d3.scaleLinear()
.domain([0,8]) //number of planets
.range([90,w/2]) //you may need adjust this later
let angle = d3.scaleLinear()
.domain([0,9]) //number of planets + 1
.range([0,360]) //you may need adjust this later
svg.selectAll("line")
.data(planets)
.enter()
.append("line")
.attr("x1", function(d,i){
let a = angle(i);
let r = orbitRadius(i);
return xCoord = x(a, r) + (w/2)
})
.attr("y1", function(d,i){
let a = angle(i);
let r = orbitRadius(i);
return yCoord = y(a, r) + (h/2)
})
.attr("x2", (w/2))
.attr("y2", (h/2))
.style("stroke", "black")
.style("stroke-width", 2)
var circleContainer = svg.selectAll("g mySolarText")
.data(planets);
var circleContainerEnter = circleContainer.enter()
.append("g")
.attr("transform", function(d,i){
let a = angle(i);
let r = orbitRadius(i);
let xCoord = x(a, r) + (w/2)
let yCoord = y(a, r) + (h/2)
return "translate("+ xCoord +"," + yCoord + ")"
});
var circle = circleContainerEnter.append("circle")
.attr("r", function(d){return d.count * 5} )
.attr("cx", 0)
.attr("cy", 0)
.attr("stroke","black")
.attr("fill", "white");
circleContainerEnter.append("text")
.attr("dx", function(d){return -20})
.text(function(d){
return d.name}
);
function x (angle, radius) {
// change to clockwise
let a = 360 - angle
// start from 12 o'clock
return radius * Math.sin(a * radians)
}
function y (angle, radius) {
// change to clockwise
let a = 360 - angle
// start from 12 o'clock
return radius * Math.cos(a * radians)
}
again, thanks so much! :)