CODEWITHSUNDEEP
javascriptsvgd3.js
Richard
Richard

Reputation: 65510

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

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

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

And I would like to produce the following diagram of the arrow strikes with D3.js:

enter image description here

I've got as far as putting circles and related text into a g element together, then rotating the g element. But I can't figure out how to keep the text at the same orientation: it gets rotated too. (I also can't figure out how to make the rotation work fully, but that's a different problem.)

Here is a JSFiddle demonstrating the code I have tried, and the problem: http://jsfiddle.net/qzkv4/10/

Upvotes: 1

Views: 1482

Answers (1)

cmonkey
cmonkey

Reputation: 4296

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.

Upvotes: 3

Related Questions