1

ターゲットへの矢の攻撃に関連する次のデータがあります。 

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

そして、 D3.jsを使用して、次の矢印のストライクの図を作成したいと思います。

ここに画像の説明を入力

円と関連するテキストをg要素にまとめてから、要素を回転させるところまで行きましたg。しかし、テキストを同じ向きに保つ方法がわかりません。テキストも回転します。（回転を完全に機能させる方法もわかりませんが、それは別の問題です。）

これは、私が試したコードと問題を示す JSFiddle です: http://jsfiddle.net/qzkv4/10/

4

1 に答える 1

3

あなたのフィドルに関して、更新：

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

最初に回転することで、「x」の平行移動が回転した座標空間で移動します。これにより、必要な場所にストライク ポイントが配置されます。もう一度元に戻すと、テキストが修正されます。

于 2013-01-24T18:49:22.813 に答える