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
Post a Comment