math - draw arc from 0 to 360 degrees with d3.js -


you can see working example of here.

my questions small inner blue arc. want show arc starting @ 0 , going hypotenuse 0 360.

at moment m code looks adds arc:

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)`); 

the problem arc goes 0 pi or 180 , 180 360. think startangle in coordinates wrong.

how can arc stretch right round 0 360?

after calculate angle, try:

if(angle>0)     angle = -2*(math.pi) + angle; 

if trig right :)

update: play fiddle see issue: http://jsfiddle.net/rcb94j8m/

atan2() behaving fine rays in quadrants 1 , 2, giving trouble in quadrants 3 , 4. -2*(math.pi) shift gets same ray, going other direction. studying of sign conventions atan2() , d3.svg.arc() lead better explanation. interested read conclusions, if post them here.


Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -