Math 使用d3.js从0到360度绘制圆弧

您可以看到这方面的一个工作示例

我的问题是关于小的内部蓝色弧。我想显示从0开始到斜边0到360的弧

此时，m代码看起来像这样添加了圆弧：

const hypotenuseCoords = {
  x1: hypotenuseCentre,
  y1: parseFloat(state.hypotenuse.attr('y1')),
  x2: xTo,
  y2: dy
};

const angle = Math.atan2(hypotenuseCoords.y2 - hypotenuseCoords.y1, hypotenuseCoords.x2 - hypotenuseCoords.x1);

const arc = d3.svg.arc()
        .innerRadius(15)
        .outerRadius(20)
        .startAngle(Math.PI/2)
        .endAngle(angle + Math.PI/2);

state.innerAngle
  .attr('d', arc)
  .attr('transform', `translate(${hypotenuseCentre}, 0)`);

问题是圆弧仅从0变为pi或180，从180变为360。我认为我坐标系中的恒星缠结是错误的

---

如何使圆弧从0延伸到360？

计算角度后，请尝试：

if(angle>0)
    angle = -2*(Math.PI) + angle;

如果我的触发器正确：）

更新：使用此小提琴查看问题：

---

atan2（）

在象限1和象限2中的光线表现良好，但在象限3和象限4中给您带来了麻烦。

-2*（Math.PI）

移位会使您到达同一条光线，但方向相反。使用

atan2（）

和

d3.svg.arc（）

研究符号约定可能会让您得到更好的解释。如果你把你的结论贴在这里，我很想看看。

nice wrok。你有可以编辑的小提琴吗？你的三角很准确。你能解释一下为什么会这样吗？@dagda1我加了一个简短的解释。我要在博客上写这个。我会在完成后发布链接。这是一个相当简洁的形象。