Étiquette à l'extérieur de l'arc (Camembert) d3.js

Question

Je suis nouveau sur d3.js et j'essaie de faire un camembert avec. Je n'ai qu'un seul problème : je n'arrive pas à sortir mes étiquettes de mes arcs... Les étiquettes sont positionnées avec arc.centroid

 arcs.append("svg:text")
    .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")

Qui peut m'aider avec ça?

Answer 1

Merci!

J'ai trouvé une autre façon de résoudre ce problème, mais la vôtre semble meilleure :-)

J'ai créé un deuxième arc avec un plus grand rayon et l'ai utilisé pour positionner mes étiquettes.

 ///// Arc Labels ///// 
// Calculate position 
var pos = d3.svg.arc().innerRadius(r + 20).outerRadius(r + 20); 

// Place Labels 
arcs.append("svg:text") 
       .attr("transform", function(d) { return "translate(" + 
    pos.centroid(d) + ")"; }) 
       .attr("dy", 5) 
       .attr("text-anchor", "middle") 
       .attr("fill", function(d, i) { return colorL(i); }) //Colorarray Labels
       .attr("display", function(d) { return d.value >= 2 ? null : "none"; })  
       .text(function(d, i) { return d.value.toFixed(0) + "%"});

Answer 2

Je ne sais pas si cela aide, mais j'ai pu créer des arcs où je place du texte, à la fois sur l'arc et juste à l'extérieur. Dans un cas, où je place les magnitudes de l'arc dans les arcs, je fais pivoter le texte sur l'arc pour correspondre à l'angle de l'arc. Dans l'autre, où je place le texte en dehors de l'arc, il est simplement horizontal. Le code se trouve sur : http://bl.ocks.org/2295263

Mon meilleur,

Franc

Answer 3

oui bébé, c'est SOHCAHTOA

 function coordinates_on_circle(hyp, angle){
  var radian= angle * Math.PI / 180 //trig uses radians
  return {
    x: Math.cos(radian) * hyp, //adj = cos(r) * hyp
    y: Math.sin(radian) * hyp //opp = sin(r) * hyp
  }
}
var radius=100
var angle=45
coordinates_on_circle(radius, angle)