从0到360度画圆弧，用d3.js

Question

YOu可以看到这个here的一个工作示例。

我的问题是关于内部的小蓝弧。我想说明的弧线从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到π或180和180到360.我认为坐标中的startAngle是错误的。

我怎样才能让电弧从0到360的正圆？

Answer 1

你计算angle后，尝试：

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

如果我TRIG是正确的:)

更新：这个小提琴玩玩看问题：http://jsfiddle.net/rcb94j8m/

atan2()是为表现精细第1象限和第2象限中的光线，但在第3象限和第4象限中给你带来麻烦。-2*(Math.PI)转变让你走向相同的光线，但走向另一个方向。一些研究atan2()和d3.svg.arc()标志约定可能会引导你更好的解释。如果你在这里发帖，我会有兴趣阅读你的结论。