Eu tenho os seguintes dados, relacionados a ataques de flecha em um alvo:

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 }   
];

E eu gostaria de produzir o seguinte diagrama dos ataques de flecha comD3.js:

Eu tenho até colocar círculos e textos relacionados em umg elemento juntos, em seguida, girando og elemento. Mas não consigo descobrir como manter o texto na mesma orientação: ele também é rotacionado. (Eu também não consigo descobrir como fazer a rotação funcionar totalmente, mas isso é um problema diferente.)

Aqui está um JSFiddle demonstrando o código que tentei e o problema:http://jsfiddle.net/qzkv4/10/