2014-12-22 42 views
3

我试图在时间轴上使用阿基米德螺旋作为轴使用D3.js绘制数据。查找阿基米德螺旋上某点的x,y坐标

Axis

所以我需要的是Javascript函数其中I它传递

  • d的距离对于每个步骤
  • S A的步数
  • X每个螺旋之间的距离手臂

该函数将穿过dist的螺旋弧s * d,并给出x和y笛卡尔坐标(图中点S,其中s = 10)。螺旋中心的第一点是0,0。

+0

已经回答? http://stackoverflow.com/questions/13894715/draw-equidistant-points-on-a-spiral – belwood

+0

这种解决它,但我不知道,如果它是最有效的方式来做我需要的东西。这会产生一系列点来绘制螺旋线。在我的情况下,这是不必要的,因为我只需要单点的xy坐标。有没有办法做到这一点,而没有迭代它之前的所有要点? – Ralphicus

+0

这是我的理解(我可能错了)方程的完整解决方案涉及积分,所以数值求解它也需要迭代求和。所以近似算法(由Python代码给出)实际上更好,因为它在算术上更简单。你可以做一些改进,使循环沿着路径非常迅速地进行,直到目标步骤并只返回一个笛卡尔点。 – belwood

回答

1

感谢您的所有帮助belwood。我试图绘制你的例子,但当我绘制5个连续的点时,它会变得有点奇怪(见底部的图片)。

我在下面的链接中设法找到了答案。看起来你非常接近。基于上面的链接

Algorithm to solve the points of a evenly-distributed/even-gaps spiral?

我的最终实现。

function archimedeanSpiral(svg,data,circleMax,padding,steps) { 
    var d = circleMax+padding; 
    var arcAxis = []; 
    var angle = 0; 
    for(var i=0;i<steps;i++){ 
     var radius = Math.sqrt(i+1); 
     angle += Math.asin(1/radius);//sin(angle) = opposite/hypothenuse => used asin to get angle 
     var x = Math.cos(angle)*(radius*d); 
     var y = Math.sin(angle)*(radius*d); 
     arcAxis.push({"x":x,"y":y}) 
    } 
    var lineFunction = d3.svg.line() 
     .x(function(d) { return d.x; }) 
     .y(function(d) { return d.y; }) 
     .interpolate("cardinal"); 

    svg.append("path") 
     .attr("d", lineFunction(arcAxis)) 
     .attr("stroke", "gray") 
     .attr("stroke-width", 5) 
     .attr("fill", "none"); 


    var circles = svg.selectAll("circle") 
     .data(arcAxis) 
     .enter() 
     .append("circle") 
     .attr("cx", function (d) { return d.x; }) 
     .attr("cy", function (d) { return d.y; }) 
     .attr("r", 10); 

    return(arcAxis); 
} 

http://s14.postimg.org/90fgp41o1/spiralexample.jpg

+0

非常好 - 现在我可以使用你的! – belwood

1

不伤害尝试:(原谅我的新手的JavaScript)

function spiralPoint(dist, sep, step) { 
    this.x = 0; 
    this.y = 0; 

    var r = dist; 
    var b = sep/(2 * Math.PI); 
    var phi = r/b; 
    for(n = 0; n < step-1; ++n) { 
     phi += dist/r; 
     r = b * phi; 
    } 
    this.x = r * Math.cos(phi); 
    this.y = r * Math.sin(phi); 

    this.print = function() { 
     console.log(this.x + ', ' + this.y); 
    }; 
} 

new spiralPoint(1,1,10).print();