D3.js: rotate group, keep text the same orientatio

2019-03-06 12:05发布

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/

1条回答
混吃等死
2楼-- · 2019-03-06 12:35

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.

查看更多
登录 后发表回答