Machen Sie das Element am Ende des Bogens erscheint

Question

Ich versuche, das Bild am Ende des Bogens ähnlich wie diese erscheinen zu lassen:

aber es scheint in der Mitte. Also egal ob ich den Endwinkel/Anfangswinkel einstelle sollte das Bild immer am Ende des Bogens erscheinen.

Dies ist jsfiddle: http://jsfiddle.net/wQXCL/421/

ich weiß, habe ich wie so etwas übersetzen zu verwenden:

.attr("transform", function(d) { 

      var x = 200 * Math.cos(0.25 * Math.PI); 
      var y = 200 * Math.sin(0.25 * Math.PI); 

      return "translate(" + x + "," + y + ")"; 

     }); 

Aber diese Formel funktioniert nicht so gut.

Answer 1

Aktualisierte Geige: http://jsfiddle.net/wQXCL/423/

Hier ist die Formel für die Punkte auf einem Kreis:

x = cx + r * cos(a) 
y = cy + r * sin(a) 

So in Ihrer Geige (Sie brauchen nicht das Zentrum hier hinzufügen, wie Sie schon dort sind, i denken D3 den Bogen um den Punkt der Übersetzung macht also Sie an dem Punkt 200/100 sind, wie Sie es vorher übersetzt also das Zentrum Sie in die Formel hinzufügen müssen 0,0):..

var x = 60* Math.cos(0.25 * Math.PI) 
var y = 60* Math.sin(0.25 * Math.PI) 

Das Problem dabei ist, dass der D3-Bogen bei 90 Grad beginnt (d.h. 3 Uhr). Also musst du das wegnehmen (Math.PI/2). Sie haben auch um die Bildgröße nehmen:

var x = 60* Math.cos(0.25 * Math.PI - (Math.PI/2)) -8 ; // take away half the width of the image 
var y = 60* Math.sin(0.25 * Math.PI - (Math.PI/2)) -8 ; 

Der Wert 60 ist das Zentrum des inneren und äußeren Radius, wie Sie das Bild in der Mitte der beiden :)

Hoffnung wollen das hilft