D3js - Circle position vs radius of circle or curved path - svg

Question

I created a data visualization of a solar system using D3.js.
In doing so, I noticed a weird inconsistency when setting the x,y position of a circle element and the radius of a circle element or curved path element.
To place the planets down, I do:
planetEnter.append("circle")
.attr("r", function (d) {
return planetScale(d.radius); })
.attr("class", "body")
.attr("fill", "url(#gradePlanet)")
.attr("filter", "url(#glowPlanet)")
.attr("transform", function (d) {
// Position of planet in relation to the sun at (0,0)
// x and y are linear scales
return "translate(" + x(d.orbital_radius) + ", " + y(0) + "), scale(.05)"; });
Now to create the orbital lines, I do:
var orbital_arc = d3.svg.arc()
.startAngle(0)
.endAngle(6.28318531) // 360 degrees
.innerRadius(function (d) {
return x(d.orbital_radius); })
.outerRadius(function (d) {
return x(d.orbital_radius); });
Now you would think that this would work and the radius of the arc would match the position of the planet, but it does not. The radius ends up MUCH bigger. To compensate, I found this magic number through trial and error:
var orbital_arc = d3.svg.arc()
.startAngle(0)
.endAngle(6.28318531) // 360 degrees
.innerRadius(function (d) {
return x(d.orbital_radius) - 470; }) // Magic number.
.outerRadius(function (d) {
return x(d.orbital_radius) - 470; }); // Magic number.
That number consistently works for every orbital line and I cannot figure why.
And it's not just the path element, the radius of a circle ends up much bigger too:
planetEnter.append("circle")
.attr("r", function (d) {
return x(d.orbital_radius); })
.attr("class", "body")
.attr("transform", function (d) {
return "translate(" + x(0) + ", " + y(0) + ")"; });
Here are the jsfiddles demostrating this (pan and zoom if you need a better view):
Solar System with Magic Number
Solar System without Magic Number
So why do I need this magic number?

Answer 1

Angles in D3 are set in radians, so you can have a function that does...
function degreesToRadians(degrees) {
return degrees * (Math.PI/180);
}
But you're always using circles, so this is more done more elegantly simply by...
var tau = Math.PI * 2; //this is your first magic number
var orbital_arc = d3.svg.arc()
.startAngle(0)
.endAngle(tau)
As for the second magic number (470) it's half of your width, so putting it all together you can do...
var tau = Math.PI * 2; //this is your first magic number
var orbital_arc = d3.svg.arc()
.startAngle(0)
.endAngle(tau)
.innerRadius(function (d) { return x(d.orbital_radius) - width/2; })
.outerRadius(function (d) { return x(d.orbital_radius) - width/2; });