使元素出现在弧的末尾

Question

我试图使图像显示在弧的末端，如下所示：

但它出现在中间。 所以无论我设置结束角度/起始角度是什么，图像都应该始终出现在弧的末端。

这是jsfiddle：

我知道我必须使用翻译，例如：

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

        });

但是这个公式也没有用。

Answer 1

更新了小提琴：http://jsfiddle.net/wQXCL/423/

以下是圆圈上的点数公式：

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

所以在你的小提琴里（你不需要在这里添加中心，因为你已经在那里，我认为D3使得弧线围绕着翻译点。所以你在前面翻译的时候是200/100点。所以您需要添加到公式的中心是0,0）：

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

问题在于，D3弧开始于90度（即3点钟）。所以你必须拿走它（Math.PI/2）。你还必须照顾图像大小：

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 ;

60的值是内半径和外半径的中心，因为您希望图像位于两者的中心：）

希望有所帮助