d3.js로 호를 0에서 360 도로 그립니다.

Question

이 here의 작동 예제를 볼 수 있습니다.

내 질문은 작은 내부 파란색 호에 관한 것입니다.

이

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에서 시작하여 순간 m 코드에서 360

0에서 빗변에가는 아크를 보여주고 싶은 0에서 pi 또는 180, 180에서 360까지. 내 좌표의 startAngle이 잘못되었다고 생각합니다.

아크를 0에서 360까지 오른쪽으로 늘리려면 어떻게해야합니까? 당신이 angle을 계산 한 후

Answer 1

, 시도 :

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

내 삼각 잘 :) 경우

업데이트 : http://jsfiddle.net/rcb94j8m/

atan2()하기 위해 좋은 행동 :이 바이올린으로 연주하면 문제를 볼 수 있습니다 광선은 사분면 1과 2에 있지만 사분면 3과 4에서 문제를 일으켰습니다. -2*(Math.PI) 시프트는 동일한 광선으로 이동하지만 다른 방향으로 이동합니다. atan2() 및 d3.svg.arc()으로 기호 규칙을 공부하면 더 나은 설명으로 이어질 수 있습니다. 나는 당신이 여기에 글을 올리면 결론을 읽는 데 흥미가있을 것입니다.