Label außerhalb arc (Kreisdiagramm) d3.js

Kann ich das problem lösen - mit Trigonometrie :).

Sehen fiddle: http://jsfiddle.net/nrabinowitz/GQDUS/

Grundsätzlich Aufruf arc.centroid(d) gibt ein [x,y] array. Sie können verwenden den Satz des Pythagoras zur Berechnung der hypotenuse, das ist die Länge der Linie von der Mitte der Torte, die arc Schwerpunkt. Dann können Sie die Berechnungen x/h * desiredLabelRadius und y/h * desiredLabelRadius zu berechnen, die gewünschte x,y für Ihr label anchor:

.attr("transform", function(d) {
    var c = arc.centroid(d),
        x = c[0],
        y = c[1],
        //pythagorean theorem for hypotenuse
        h = Math.sqrt(x*x + y*y);
    return "translate(" + (x/h * labelr) +  ',' +
       (y/h * labelr) +  ")"; 
})

Der einzige Nachteil hier ist, dass text-anchor: middle ist keine gute Wahl mehr - Sie wären besser dran, die Einstellung der text-anchor auf welcher Seite der Torte sind wir auf:

.attr("text-anchor", function(d) {
    //are we past the center?
    return (d.endAngle + d.startAngle)/2 > Math.PI ?
        "end" : "start";
})

InformationsquelleAutor der Antwort nrabinowitz

Speziell für Kreisdiagramme, die d3.layout.pie() Funktion format-Daten mit einem startAngle und endAngle Attribute. Der radius kann das sein, was Sie sich wünschen (wie weit vom Zentrum Sie möchten, platzieren Sie das Etikett).

Kombiniert man diese Informationen mit ein paar trigonometrische Funktionen können Sie bestimmen die x-und y-Koordinaten-Etiketten.

Betrachten Sie diese gist/block.

Bezug auf die x/y Positionierung der Texte, die Magie ist in dieser Zeile (formatiert für bessere Lesbarkeit):

.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 gibt uns unsere Winkel (theta) im Bogenmaß.
• (radius - 12) ist der willkürlichen radius wählte ich für die position des Textes.
• -1 * die y-Achse ist invertiert (siehe unten).

Die trigonometrischen Funktionen verwendet werden: cos = adjacent /hypotenuse und sin = opposite /hypotenuse. Aber es gibt ein paar Dinge, die wir berücksichtigen müssen, um diese Arbeit mit unseren Etiketten.

1. 0 Winkel ist um 12 Uhr.
2. Der Winkel noch erhöht im Uhrzeigersinn.
3. Die y-Achse invertiert aus der standard kartesischen Koordinatensystem. Positive y-Richtung 6 Uhr - nach unten.
4. Positive x ist noch in Richtung 3 Uhr - Recht.

Dass dagegen etwas kleiner und hat im Grunde die Wirkung vertauschen sin und cos. Unsere trigonometrischen Funktionen werden zu: sin = adjacent /hypotenuse und cos = opposite /hypotenuse.

Substitution von Variablen-Namen haben wir sin(radians) = x /r und cos(radians) = y /r. Nach einigen algebraischen Manipulationen, die wir bekommen können beide Funktionen in Bezug auf die x-und y jeweils r * sin(radians) = x und r * cos(radians) = y. Von dort aus, nur stecken Sie diese in die transform/translate-Attribut.

,Werden die Etiketten in der richtigen Position, um Sie zu suchen ausgefallene, müssen Sie einige styling-Logik wie diese:

.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";
    }
  })

Damit werden die Etiketten von 10:30 Uhr bis 1:30 Uhr und von 4:30 Uhr bis 7:30 Uhr Anker in der Mitte (oben und unten), werden die Beschriftungen von 1:30 Uhr bis 4:30 Uhr Anker auf der linken Seite (die Rechte), und die Etiketten von 7:30 Uhr bis 10:30 Uhr Anker auf der rechten Seite (Sie sind auf der linken Seite).

Den gleichen Formeln können verwendet werden, für jede D3 radial-graph, der einzige Unterschied ist, bestimmen Sie die Winkel.

Ich hoffe, dies hilft jemand stolpert über Sie!

InformationsquelleAutor der Antwort clayzermk1

Den folgenden CoffeeScript gearbeitet für mich, um Etiketten noch innerhalb der Kreissegmente, aber in Richtung der äußeren Kante:

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) + ')'

InformationsquelleAutor der Antwort Sarah Vessels

War dies der low-cost-Antwort, die ich war glücklich mit. Es drückt alle Etiketten horizontal (das ist, wo ich den zusätzlichen Platz):

g.append("text")
  .attr("transform", function(d) { 
      var pos = arc.centroid(d); 
      return "translate(" + (pos[0] + (.5 - (pos[0] < 0)) * radius) + "," + (pos[1]*2) + ")"; 
  })
  .attr("dy", ".35em")
  .style("text-anchor", function(d) { 
      return arc.centroid(d)[0] > 0 ? "start" : "end";
   })
  .text(function(d) { return d.label; });

InformationsquelleAutor der Antwort cheepychappy

Ich erreicht das gleiche durch Zeichnung Prozentsatz als Etiketten, die außerhalb des Kreisdiagramms graph, hier ist der 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 + '%';
      });

InformationsquelleAutor der Antwort FarazShuja