我試圖在時間軸上使用阿基米德螺旋作爲軸使用D3.js繪製數據。查找阿基米德螺旋上某點的x,y座標
所以我需要的是Javascript函數其中I它傳遞
- d的距離對於每個步驟
- S A的步數
- X每個螺旋之間的距離手臂
該函數將穿過dist的螺旋弧s * d,並給出x和y笛卡爾座標(圖中點S,其中s = 10)。螺旋中心的第一點是0,0。
我試圖在時間軸上使用阿基米德螺旋作爲軸使用D3.js繪製數據。查找阿基米德螺旋上某點的x,y座標
所以我需要的是Javascript函數其中I它傳遞
該函數將穿過dist的螺旋弧s * d,並給出x和y笛卡爾座標(圖中點S,其中s = 10)。螺旋中心的第一點是0,0。
感謝您的所有幫助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);
}
非常好 - 現在我可以使用你的! – belwood
不傷害嘗試:(原諒我的新手的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();
已經回答? http://stackoverflow.com/questions/13894715/draw-equidistant-points-on-a-spiral – belwood
這種解決它,但我不知道,如果它是最有效的方式來做我需要的東西。這會產生一系列點來繪製螺旋線。在我的情況下,這是不必要的,因爲我只需要單點的xy座標。有沒有辦法做到這一點,而沒有迭代它之前的所有要點? – Ralphicus
這是我的理解(我可能錯了)方程的完整解決方案涉及積分,所以數值求解它也需要迭代求和。所以近似算法(由Python代碼給出)實際上更好,因爲它在算術上更簡單。你可以做一些改進,使循環沿着路徑非常迅速地進行,直到目標步驟並只返回一個笛卡爾點。 – belwood