文章/答案/技术大牛

发布

社区首页 >问答首页 >D3js -圆位置与圆或曲线路径半径的关系

问D3js -圆位置与圆或曲线路径半径的关系
EN

Stack Overflow用户

提问于 2013-03-10 05:54:46

回答 1查看 1.1K关注 0票数 1

我使用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.

这个数字一直适用于每条轨道线，我不知道为什么。而且不仅仅是path元素，圆的半径也变得更大：

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 (如果您需要更好的视图，可以进行平移和缩放)：

Solar System with Magic Number

Solar System without Magic Number

那么为什么我需要这个神奇的数字呢？

svg

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-03-10 07:48:34

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/15316350

复制

相似问题

问D3js -圆位置与圆或曲线路径半径的关系
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3js -圆位置与圆或曲线路径半径的关系EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3js -圆位置与圆或曲线路径半径的关系
EN