Svg D3js-圆位置与圆半径或曲线路径
我使用D3.js创建了一个太阳系的数据可视化。 在这样做的过程中,我注意到在设置圆元素的x、y位置和圆元素或曲线路径元素的半径时存在一种奇怪的不一致性。 要将行星放下,我需要:Svg D3js-圆位置与圆半径或曲线路径,svg,d3.js,Svg,D3.js,我使用D3.js创建了一个太阳系的数据可视化。 在这样做的过程中,我注意到在设置圆元素的x、y位置和圆元素或曲线路径元素的半径时存在一种奇怪的不一致性。 要将行星放下,我需要: planetEnter.append("circle") .attr("r", function (d) { return planetScale(d.radius); }) .attr("class", "body") .attr("fill", "url(#gradePlan
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.
这个数字一直适用于每一条轨道线,我不知道为什么。
不仅仅是路径元素,圆的半径也要大得多:
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) + ")"; });
下面是演示这一点的jsfiddles(如果需要更好的视图,请平移和缩放):
那么为什么我需要这个幻数呢?D3中的角度是以弧度为单位设置的,所以你可以有一个函数来
function degreesToRadians(degrees) {
return degrees * (Math.PI/180);
}
但你总是使用圆圈,所以这是做得更优雅,更简单的是
var tau = Math.PI * 2; //this is your first magic number
var orbital_arc = d3.svg.arc()
.startAngle(0)
.endAngle(tau)
至于第二个魔法数字(470),它是你宽度的一半,所以把它们放在一起你就可以
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; });