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

Spécifiquement pour les diagrammes à secteurs, la d3.layout.pie() fonction du format de données avec un startAngle et endAngle attributs. Le rayon peut être ce que vous désirez (à quelle distance du centre, vous souhaitez placer l'étiquette).

Combinant ces informations avec un couple fonctions trigonométriques vous permet de déterminer les coordonnées x et y pour les étiquettes.

Considérer cette gist/bloc.

Concernant le x/y de positionnement du texte, la magie est dans cette ligne (formaté pour des raisons de lisibilité):

.attr("transform", function(d) {
  return "translate(" + 
    ( (radius - 12) * Math.sin( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) +
    ", " +
    ( -1 * (radius - 12) * Math.cos( ((d.endAngle - d.startAngle) / 2) + d.startAngle ) ) +
  ")";
 })

• ((d.endAngle - d.startAngle) /2) + d.startAngle nous donne notre (thêta) en radians.
• (radius - 12) est l'arbitraire rayon que j'ai choisi pour la position du texte.
• -1 * l'axe des y est inversé (voir ci-dessous).

Les fonctions trigonométriques sont utilisés: cos = adjacent /hypotenuse et sin = opposite /hypotenuse. Mais il ya un couple de choses que nous devons envisager de faire ces travaux avec nos étiquettes.

1. 0 angle est à 12 heures.
2. L'angle augmente toujours dans le sens des aiguilles.
3. L'axe des y est inversée à partir de la norme de système de coordonnées cartésiennes. Positive y est dans la direction de 6h - bas.
4. Positif x est toujours dans la direction de 3h - droit.

Que les dégâts les choses un peu et a essentiellement pour effet de permutation sin et cos. Nos fonctions trigonométriques deviennent alors: sin = adjacent /hypotenuse et cos = opposite /hypotenuse.

La substitution des noms de variables, nous avons sin(radians) = x /r et cos(radians) = y /r. Après quelques manipulation algébrique, nous pouvons obtenir à la fois des fonctions en termes de x et y respectivement r * sin(radians) = x et r * cos(radians) = y. À partir de là, il suffit de le brancher dans le transformer, traduire attribut.

Cela va mettre les étiquettes au bon endroit, pour faire de fantaisie, vous avez besoin d'un style logique comme ceci:

.style("text-anchor", function(d) {
    var rads = ((d.endAngle - d.startAngle) / 2) + d.startAngle;
    if ( (rads > 7 * Math.PI / 4 && rads < Math.PI / 4) || (rads > 3 * Math.PI / 4 && rads < 5 * Math.PI / 4) ) {
      return "middle";
    } else if (rads >= Math.PI / 4 && rads <= 3 * Math.PI / 4) {
      return "start";
    } else if (rads >= 5 * Math.PI / 4 && rads <= 7 * Math.PI / 4) {
      return "end";
    } else {
      return "middle";
    }
  })

Cela fera des étiquettes à partir de 10:30 heures à 1:30 heures et à partir de 4:30 heures à 7:30 heures d'ancrage dans le milieu (ils sont au-dessus et au-dessous), les étiquettes à partir de 1:30 heures à 4:30 heures d'ancre sur la gauche (à droite), et les étiquettes à partir de 7:30 heures à 10:30 heures d'ancre sur la droite (ils sont à gauche).

Les mêmes formules peuvent être utilisées pour n'importe quel D3 radial graphique, la seule différence est la façon dont vous déterminez l'angle.

J'espère que cela aide quelqu'un de tomber sur elle!

Je ne sais pas si cela aide, mais j'ai été en mesure de créer des arcs où je place le texte, à la fois, sur l'arc et juste à l'extérieur il. Dans un cas, où je place la grandeur de l'arc dans les arcs, je tourne le texte sur l'arc pour correspondre à l'angle de l'arc. Dans les autres, où je place le texte à l'extérieur de l'arc, il est tout simplement à l'horizontale. Le code est situé à: http://bl.ocks.org/2295263

De Mon Mieux,

Frank

Suivantes CoffeeScript a fonctionné pour moi d'obtenir des étiquettes toujours à l'intérieur de la tarte de tranches, mais vers le bord extérieur:

attr 'transform', (d) ->
  radius = width / 2 # radius of whole pie chart
  d.innerRadius = radius * 0.5
  d.outerRadius = radius * 1.5
  'translate(' + arc.centroid(d) + ')'

Que j'ai obtenu le même par tirage au pourcentage d'étiquettes à l'extérieur du graphique graphique, voici le code http://bl.ocks.org/farazshuja/e2cb52828c080ba85da5458e2304a61f

g.append("text")
        .attr("transform", function(d) {
        var _d = arc.centroid(d);
        _d[0] *= 2.2;   //multiply by a constant factor
        _d[1] *= 2.2;   //multiply by a constant factor
        return "translate(" + _d + ")";
      })
      .attr("dy", ".50em")
      .style("text-anchor", "middle")
      .text(function(d) {
        if(d.data.percentage < 8) {
          return '';
        }
        return d.data.percentage + '%';
      });