D3js - 서클 위치 대 원 또는 곡선 경로의 반경

Question

D3.js를 사용하여 태양계의 데이터 시각화를 만들었습니다. 이렇게하면 원 요소의 x, y 위치와 원 요소 또는 곡선 경로 요소의 반지름을 설정할 때 이상한 불일치가 있음을 발견했습니다. 아래로 행성을 배치하려면, 내가 할 :

이제

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)"; }); 

이 궤도 선을 만들기 위해 내가 할 :

이제

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); }); 

이 작동 것이라고 생각하고 원호의 반경이 일치합니다 행성의 위치, 그러나 그것은하지 않습니다. 반경이 훨씬 커집니다. , 보상하기 위해 내가 시행 착오를 통해 매직 넘버를 발견

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. 

그 숫자는 지속적으로 모든 궤도 라인 작동하고 나는 이유를 알아낼 수 없습니다. 는 그리고 경로 요소는 원의 반지름은 너무 큰 끝 아닌 것 :

Solar System with Magic Number : 여기

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) + ")"; }); 

이 (팬 당신이 더 잘 볼 필요하면 확대)를 demostrating jsfiddles 있습니다

Solar System without Magic Number

그래서 내가 왜이 마법 번호가 필요합니까? D3의

Answer 1

각도는 사용자가 수행하는 기능을 가질 수 있도록

function degreesToRadians(degrees) { 
    return degrees * (Math.PI/180); 
} 

..., 라디안으로 설정하지만 당신은 항상 원을 사용하고, 그래서 이것은 이상 단순히 더 우아하게 이루어집니다 ... 두 번째 매직 넘버 (470)는, 당신 폭의 절반의에 관해서는

var tau = Math.PI * 2; //this is your first magic number 
var orbital_arc = d3.svg.arc() 
    .startAngle(0) 
    .endAngle(tau) 

은 그래서 ... 함께 당신이 할 수있는 모든 퍼팅

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; });