문제 설명
d3.js의 궤도 유형 차트 (Orbit type chart in d3.js)
이와 비슷한 것을 만들고 싶습니다. d3.js를 사용하겠습니다. 외부 궤도와 내부 원을 만들었습니다. 그러나 외부 궤도에서 외부 고리의 위치를 계산하는 방법은 무엇입니까?
외부 원의 수는 동적입니다.
참조 솔루션
방법 1:
A point at angle theta on the circle whose centre is (x0,y0) and whose radius is r is (x0 + r cos theta, y0 + r sin theta). Now choose theta values evenly spaced between 0 and 2pi.
Reference: Calculating the position of points in a circle
var orbit = svg.append("circle")
.attr("class", "earthOrbit")
.attr("r", radii.earthOrbit)
.style("fill", "none")
.style("stroke", "#bababa")
.style("stroke‑width", "30");
var circlePositions = getCirclePoints(15, radii.earthOrbit, {
X: 0,
Y: 0
});
svg.selectAll(".earth").data(circlePositions)
.enter()
.append("circle")
.attr("class", "earth")
.style("fill", "white")
.attr("r", radii.earth)
.attr("cx", function(d) {
return d.cx
})
.attr("cy", function(d) {
return d.cy
})
.style("stroke", "#bababa")
.style("stroke‑width", "10");
var now = d3.time.year.floor(new Date());
var spacetime = d3.select('body');
var width = 960,
height = 700,
radius = Math.min(width, height);
var radii = {
"sun": radius / 6,
"earthOrbit": radius / 2.5,
"earth": radius / 32,
"moonOrbit": radius / 16,
"moon": radius / 96
};
// Space
var svg = spacetime.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// Sun
var sun = svg.append("circle")
.attr("class", "sun")
.attr("r", radii.sun)
//.style("fill", "rgba(255, 204, 0, 1.0)");
.style("stroke", "#f58c2e")
.style("stroke‑width", "10")
.style("fill", "none");
// Earth's orbit
var orbit = svg.append("circle")
.attr("class", "earthOrbit")
.attr("r", radii.earthOrbit)
.style("fill", "none")
.style("stroke", "#bababa")
.style("stroke‑width", "30");
// Current position of Earth in its orbit
var earthOrbitPosition = d3.svg.arc()
.outerRadius(radii.earthOrbit + 1)
.innerRadius(radii.earthOrbit ‑ 1)
.startAngle(0)
.endAngle(0);
svg.append("path")
.attr("class", "earthOrbitPosition")
.attr("d", earthOrbitPosition)
.style("fill", "rgba(255, 204, 0, 0.75)");
// Time of day
var day = d3.svg.arc()
.outerRadius(radii.earth)
.innerRadius(0)
.startAngle(0)
.endAngle(0);
svg.append("path")
.attr("class", "day")
.attr("d", day)
.attr("transform", "translate(0," + ‑radii.earthOrbit + ")")
.style("fill", "rgba(53, 110, 195, 1.0)");
// Current position of the Moon in its orbit
var moonOrbitPosition = d3.svg.arc()
.outerRadius(radii.moonOrbit + 1)
.innerRadius(radii.moonOrbit ‑ 1)
.startAngle(0)
.endAngle(0);
svg.append("path")
.attr("class", "moonOrbitPosition")
.attr("d", moonOrbitPosition)
.attr("transform", "translate(0," + ‑radii.earthOrbit + ")")
.style("fill", "rgba(113, 170, 255, 0.75)");
function getCirclePoints(points, radius, center) {
var circlePositions = [];
var slice = 2 * Math.PI / points;
for (var i = 0; i < points; i++) {
var angle = slice * i;
var newX = (center.X + radius * Math.cos(angle));
var newY = (center.Y + radius * Math.sin(angle));
circlePositions.push({
cx: newX,
cy: newY
});
}
return circlePositions;
}
var circlePositions = getCirclePoints(15, radii.earthOrbit, {
X: 0,
Y: 0
});
svg.selectAll(".earth").data(circlePositions)
.enter()
.append("circle")
.attr("class", "earth")
.style("fill", "white")
.attr("r", radii.earth)
.attr("cx", function(d) {
return d.cx
})
.attr("cy", function(d) {
return d.cy
})
.style("stroke", "#bababa")
.style("stroke‑width", "10");.earth {}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>