D3.js: rotate group, keep text the same orientation?

Question

I have the following data, relating to arrow strikes on a target:

var data = [
    { name: \"Bullseye\", dist: 0, angle: 0 },   
    { name: \"Strike 1\", dist         


        

Answer 1

Regarding your fiddle, an update:

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

By rotating first, the translation on the "x" is now moving in the rotated coordinate space. This puts the strike points where you want. By rotating back again, the text is corrected.