Beschriftung außerhalb des Bogens (Kreisdiagramm) d3.js

Question

Ich bin neu bei d3.js und versuche, damit ein Tortendiagramm zu erstellen. Ich habe nur ein Problem: Ich kann meine Beschriftungen nicht außerhalb meiner Bögen platzieren... Die Beschriftungen sind mit arc.centroid positioniert

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

Wer kann mir dabei helfen?

Answer 1

Ich habe das Gleiche erreicht, indem ich den Prozentsatz als Beschriftungen außerhalb des Tortendiagramms zeichne, 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;   // mit einem konstanten Faktor multiplizieren
        _d[1] *= 2.2;   // mit einem konstanten Faktor multiplizieren
        return "translate(" + _d + ")";
      })
      .attr("dy", ".50em")
      .style("text-anchor", "middle")
      .text(function(d) {
        if(d.data.prozentsatz < 8) {
          return '';
        }
        return d.data.prozentsatz + '%';
      });

Answer 2

Der folgende CoffeeScript hat für mich gearbeitet, um Beschriftungen immer noch innerhalb der Kuchenscheiben, aber in Richtung des äußeren Randes zu erhalten:

attr 'transform', (d) ->
  radius = width / 2 # Radius des gesamten Kuchendiagramms
  d.innerRadius = radius * 0.5
  d.outerRadius = radius * 1.5
  'translate(' + arc.centroid(d) + ')'

Answer 3

Dies war die kostengünstige Antwort, die ich zufrieden war. Sie schiebt alle Beschriftungen horizontal (dort hatte 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; });