我正在尝试使用 D3.js 以阿基米德螺旋线为轴在时间线上绘制数据。
所以我需要一个 Javascript 函数来传递它
- D 每一步的距离
- 步骤数
- X 每个螺旋臂之间的距离
该函数将遍历螺旋弧的距离为 s*d,并给出 x 和 y 笛卡尔坐标(图中的点 S,其中 s=10)。螺旋中心的第一个点位于 0,0。
我正在尝试使用 D3.js 以阿基米德螺旋线为轴在时间线上绘制数据。
所以我需要一个 Javascript 函数来传递它
该函数将遍历螺旋弧的距离为 s*d,并给出 x 和 y 笛卡尔坐标(图中的点 S,其中 s=10)。螺旋中心的第一个点位于 0,0。
感谢您对贝尔伍德的所有帮助。我尝试绘制您的示例,但是当我绘制 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);
}
尝试没有坏处:(请原谅我的新手 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();