Javascript 如何根据度和坐标绘制椭圆

我正在用D3图表画一个椭圆。我没有Rx，Cx，Ry，Cy，但是在每8度的间隔有cordinate（x0和y0）

θ (°) x(θ) y(θ) 0.00 0.00 3.09 8.00 0.48 3.37 16.00 0.94 3.59 24.00 1.39 3.74 32.00 1.81 3.81 40.00 2.20 3.81 48.00 2.54 3.74 56.00 2.83 3.59 64.00 3.07 3.37 72.00 3.25 3.09 80.00 3.36 2.75 88.00 3.41 2.35 96.00 3.40 1.91 104.00 3.31 1.43 112.00 3.17 0.92 120.00 2.96 0.40 128.00 2.69 -0.13 136.00 2.37 -0.66 144.00 2.01 -1.18 152.00 1.60 -1.67 160.00 1.17 -2.14 168.00 0.71 -2.56 176.00 0.24 -2.93 184.00 -0.24 -3.24 192.00 -0.71 -3.49 200.00 -1.17 -3.67 208.00 -1.60 -3.78 216.00 -2.01 -3.82 224.00 -2.37 -3.78 232.00 -2.69 -3.67 240.00 -2.96 -3.49 248.00 -3.17 -3.24 256.00 -3.31 -2.93 264.00 -3.40 -2.56 272.00 -3.41 -2.14 280.00 -3.36 -1.67 288.00 -3.25 -1.18 296.00 -3.07 -0.66 304.00 -2.83 -0.13 312.00 -2.54 0.40 320.00 -2.20 0.92 328.00 -1.81 1.43 336.00 -1.39 1.91 344.00 -0.94 2.35 352.00 -0.48 2.75 360.00 0.00 3.09 θ（°）x（θ）y（θ） 0.00 0.00 3.09 8.00 0.48 3.37 16.00 0.94 3.59 24.00 1.39 3.74 32.00 1.81 3.81 40.00 2.20 3.81 48.00 2.54 3.74 56.00 2.83 3.59 64.00 3.07 3.37 72.00 3.25 3.09 80.00 3.36 2.75 88.00 3.41 2.35 96.00 3.40 1.91 104.00 3.31 1.43 112.00 3.17 0.92 120.00 2.96 0.40 128.00 2.69 -0.13 136.00 2.37 -0.66 144.00 2.01 -1.18 152.00 1.60 -1.67 160.00 1.17 -2.14 168.00 0.71 -2.56 176.00 0.24 -2.93 184.00 -0.24 -3.24 192.00 -0.71 -3.49 200.00 -1.17 -3.67 208.00 -1.60 -3.78 216.00 -2.01 -3.82 224.00 -2.37 -3.78 232.00 -2.69 -3.67 240.00 -2.96 -3.49 248.00 -3.17 -3.24 256.00 -3.31 -2.93 264.00 -3.40 -2.56 272.00 -3.41 -2.14 280.00 -3.36 -1.67 288.00 -3.25 -1.18 296.00 -3.07 -0.66 304.00 -2.83 -0.13 312.00 -2.54 0.40 320.00 -2.20 0.92 328.00 -1.81 1.43 336.00 -1.39 1.91 344.00 -0.94 2.35 352.00 -0.48 2.75 360.00 0.00 3.09

---

我们如何画一个连接所有点的椭圆？举个例子会很有帮助。

因为你有所有的笛卡尔坐标，这里最好的选择是使用

元素而不是

。同样，由于同样的原因，你实际上不需要D3或度（你的第一列）。但是，如果您想坚持使用D3，您只需要一个线生成器，如下所示：

const lineGenerator = d3.line()
    .x(d => xScale(d.xPos))
    .y(d => yScale(d.yPos));

在这里，我将您的

x（θ）

和

y（θ）

重命名为

xPos

和

yPos

。此外，我使用的是刻度（但请注意量程间隔，它们必须相同）

这就是结果：

const csv=`deg，xPos，yPos
0.00,0.00,3.09
8.00,0.48,3.37
16.00,0.94,3.59
24.00,1.39,3.74
32.00,1.81,3.81
40.00,2.20,3.81
48.00,2.54,3.74
56.00,2.83,3.59
64.00,3.07,3.37
72.00,3.25,3.09
80.00,3.36,2.75
88.00,3.41,2.35
96.00,3.40,1.91
104.00,3.31,1.43
112.00,3.17,0.92
120.00,2.96,0.40
128.00,2.69,-0.13
136.00,2.37,-0.66
144.00,2.01,-1.18
152.00,1.60,-1.67
160.00,1.17,-2.14
168.00,0.71,-2.56
176.00,0.24,-2.93
184.00,-0.24,-3.24
192.00,-0.71,-3.49
200.00,-1.17,-3.67
208.00,-1.60,-3.78
216.00,-2.01,-3.82
224.00,-2.37,-3.78
232.00,-2.69,-3.67
240.00,-2.96,-3.49
248.00,-3.17,-3.24
256.00,-3.31,-2.93
264.00,-3.40,-2.56
272.00,-3.41,-2.14
280.00,-3.36,-1.67
288.00,-3.25,-1.18
296.00,-3.07,-0.66
304.00,-2.83,-0.13
312.00,-2.54,0.40
320.00,-2.20,0.92
328.00,-1.81,1.43
336.00,-1.39,1.91
344.00,-0.94,2.35
352.00,-0.48,2.75
360.00,0.00,3.09`;
const data=d3.csvParse（csv，d3.autoType）；
const svg=d3.选择（“svg”）；
常量xScale=d3.scaleLinear（）
.domain（d3.extent（数据，d=>d.xPos））
.范围（[85215]）；
常量yScale=d3.scaleLinear（）
.domain（d3.extent（数据，d=>d.yPos））
.范围（[10140]）；
常量lineGenerator=d3.line（）
.x（d=>xScale（d.xPos））
.y（d=>yScale（d.yPos））；
常量椭圆=svg.append（“路径”）
.基准（数据）
.attr（“d”，线路生成器）
路径{
填充：无；
笔画宽度：3px；
笔画：钢蓝；
}