D3.js：旋转组，保持文本方向相同？

Question

我有以下数据，涉及目标上的箭头攻击：

var data = [
    { name: "Bullseye", dist: 0, angle: 0 },   
    { name: "Strike 1", dist: 50, angle: 0 },   
    { name: "Strike 2", dist: 100, angle: 90 },    
    { name: "Strike 3", dist: 150, angle: 180 }   
];

我想用D3.js生成以下箭头图表：

我已经将圈子和相关文本放在一起放在g元素中，然后旋转g元素。但我无法弄清楚如何将文本保持在同一方向：它也会旋转。 （我也无法弄清楚如何使旋转完全发挥作用，但这是一个不同的问题。）

这是一个JSFiddle，演示了我尝试过的代码，问题是：http://jsfiddle.net/qzkv4/10/

Answer 1

关于你的小提琴，更新：

 return "rotate(" + d.angle + ") " + 
        "translate(" + d.dist + ",0) " + 
        "rotate(" + (-1 * d.angle) + ")";

首先旋转，“x”上的平移现在在旋转的坐标空间中移动。这会将击球点放在您想要的位置。通过再次向后旋转，文本得到纠正。