Dessiner un arc de 0 à 360 degrés avec d3.js

Question

Vous pouvez voir un exemple de travail de ceci ici.

Mes questions concernent le petit arc bleu intérieur. Je veux montrer l'arc en commençant à 0 et en allant jusqu'à l'hypoténuse de 0 à 360.

Pour le moment, mon code ressemble à ceci qui ajoute l'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)`);

Le problème est que l'arc ne va que de 0 à pi ou 180 et de 180 à 360. Je pense que le startAngle dans mes coordonnées est incorrect.

Comment puis-je faire en sorte que l'arc s'étende complètement de 0 à 360?

Answer 1

Après avoir calculé angle, essayez :

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

Si mes trigonométries sont correctes :)

Mise à jour : Jouez avec ce fiddle pour voir le problème : http://jsfiddle.net/rcb94j8m/

atan2() se comportait correctement pour les rayons dans les quadrants 1 et 2, mais vous posait problème dans les quadrants 3 et 4. Le décalage -2*(Math.PI) vous amène sur le même rayon, mais en allant dans l'autre direction. Un peu d'étude sur les conventions de signe avec atan2() et d3.svg.arc() vous mènerait probablement à une meilleure explication. Je serais intéressé de lire vos conclusions, si vous les publiez ici.