寻找阿基米德螺线上一点的x,y坐标

Question

我正在尝试使用D3.js在一个阿基米德螺线作为轴线的时间轴上绘制数据。

所需的是一个Javascript函数，其中传递以下参数：

• D：每步的距离
• S：步数
• X：螺旋臂之间的距离

该函数将遍历螺旋弧线，行程为s*d，并给出x和y笛卡尔坐标（图表中s=10时的S点）。螺旋的中心点为0,0。

- Ralphicus

---

已经回答了吗？https://dev59.com/IWYr5IYBdhLWcg3wLXSh - belwood

这种方法可以解决问题，但我不确定对于我所需的内容是否是最有效的方式。这将为您生成一系列点以绘制螺旋线。在我的情况下，这并不必要，因为我只需要单个点的xy坐标。有没有一种方法可以在不迭代其前面的所有点的情况下完成它？ - Ralphicus

据我了解（可能不准确），方程的完整解法涉及到积分，因此数值求解需要进行迭代求和。因此，所给出的近似算法（由Python代码给出）实际上更好，因为它在算术上更简单。有几个改进可以使循环快速沿着路径前进直到目标步骤，并仅返回一个笛卡尔点。 - belwood

Answer 1

感谢您的帮助，Belwood。我尝试绘制了您的示例，但在绘制5个连续点时出现了一些奇怪的情况（请参见下方的图像）。

我在下面的链接中找到了答案。不过，看起来您离答案非常接近。 算法：解决均匀分布/等间隔螺旋线的点？ 根据上述链接，我最终实现了我的代码。

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

- Ralphicus

Answer 2

不试试怎么知道呢：（抱歉我的JS还是新手）

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

- belwood