javascript - 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”上的平移现在在旋转的坐标空间中移动。这会将打击点放在您想要的位置。通过再次旋转，文本被更正。