Javascript 如何在d3 v4中使用点阵列绘制圆弧

我想从这样的点阵列中画一条弧：

var points = [
    [
        51.93326250000001,
        21.4375
    ],
    [
        36.72733749999999,
        40.603550000000002
    ],
    [
        21.527537500000008,
        21.4144
    ]
];

我试过使用

d3.line（）

，

d3.curveBasis（）

和

d3.curveBundle.beta（1）

但它正在画一条曲线：

这不是我要找的。我想要一个弧形：

我不明白如何使用这个：

var arc = d3.arc()
    .innerRadius(180)
    .outerRadius(240)
    .startAngle(0);

---

使用我的点。

为了绘制圆弧，您需要知道其关联圆的中心坐标及其半径

在这种情况下，由于圆弧（圆的一部分）由3个点的坐标定义，因此需要计算由这3个点定义的圆的中心：

var点=[
[
51.93326250000001,
21.4375
],
[
36.72733749999999,
40.603550000000002
],
[
21.527537500000008,
21.4144
]
];
函数CalculateCrcelCenter（A、B、C）{
var yDelta_a=B[1]-a[1]；
var xDelta_a=B[0]-a[0]；
var yDelta_b=C[1]-b[1]；
var xDelta_b=C[0]-b[0]；
var中心=[]；
var aSlope=yDelta\u a/xDelta\u a；
var b坡度=yDelta_b/xDelta_b；
中心[0]=（aSlope*bSlope*（A[1]-C[1]）+bSlope*（A[0]+B[0]）-aSlope*（B[0]+C[0]）/（2*（bSlope aSlope））；
中心[1]=-1*（中心[0]-（A[0]+B[0]）/2）/aSlope+（A[1]+B[1]）/2；
返回中心；
}
功能距离（A，B）{
变量a=a[0]-B[0]；
VarB=A[1]-b[1]；
返回Math.sqrt（a*a+b*b）；
}
var中心=计算中心（点[0]，点[1]，点[2]）；
var半径=距离（点[0]，中心）；
var svg=d3。选择（“svg”）.attr（“宽度”，200）。attr（“高度”，200）；
//圆圈
svg.append（“圆”）
.attr（“cx”，中心[0]）
.attr（“cy”，中心[1]）
.attr（“r”，半径）
.attr（“填充”、“白色”）
.attr（“笔划”、“黑色”）；
var startAngle=Math.atan2（点[0][1]-中心[1]，点[0][0]-中心[0]）+0.5*Math.PI；
var endAngle=Math.atan2（中心[1]-点[2][1]，中心[0]-点[2][0]）+1.5*Math.PI；
var arc=d3.arc（）.内半径（半径）.外半径（半径）；
var sector=svg.append（“路径”）
.attr（“填充”、“无”）
.attr（“笔划宽度”，2）
.attr（“笔划”、“蓝色”）
.attr（“d”，弧（{“startAngle”：startAngle，“endAngle”：endAngle}））
.attr（“转换”、“平移”（“+center[0]+”，“+center[1]+”））；
//这三点：
svg.selectAll（“小圆圈”）
.数据（点数）
.enter（）.append（“圆”）
.attr（“cx”，函数（d）{返回d[0]；}）
.attr（“cy”，函数（d）{返回d[1]；}）
.attr（“r”，2）
.attr（“填充”、“红色”）

SVG arc命令描述椭圆弧。三点不足以找到唯一的解决方案；你需要设置更多的约束条件（例如长轴和短轴长度相同，即一个圆），我想OP想要画一条带有圆弧段的路径，而不是一个圆。是的，这就是我在回读文章时的想法。更新了答案。
var arc = d3.arc()
    .innerRadius(180)
    .outerRadius(240)
    .startAngle(0);