1

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/

Richard
  • 62,943
  • 126
  • 334
  • 542
  • What are you trying to achieve with the rotation? – Lars Kotthoff Jan 24 '13 at 18:29
  • I'm trying to put the arrow strikes into the right place on the target. (The data for each strike specifies its angle from the horizontal, plus its distance from the bullseye.) (This is simplified data!) – Richard Jan 24 '13 at 18:35

1 Answers1

3

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.

cmonkey
  • 4,256
  • 1
  • 26
  • 46