[解決済み] d3 で x 軸のテキストを回転させる

質問

私はd3とsvgコーディングの初心者で、グラフのxAxis上のテキストを回転させる方法を探しています。私の問題は、通常、xAxisタイトルが棒グラフのバーの幅よりも長いということです。そのため、xAxis の下でテキストを回転させ、（水平方向ではなく）垂直方向に表示させたいと考えています。

私はtransform属性を追加しようとしました。 .attr("transform", "rotate(180)") を追加してみました。

しかし、それを行うと、テキストが完全に消えてしまいます。svg canvas の高さを増やしてみましたが、それでもテキストを表示することはできませんでした。

何が間違っているのか、何かご意見をいただければ幸いです。x と y の位置も調整する必要があるのでしょうか。そして、もしそうなら、どのくらいですか (Firebug でそれを見ることができるとき、トラブルシューティングするのは難しいです)。

どのように解決するのですか？

rotate(180)のtransformを設定すると、要素を回転させます。 原点に対して相対的に を回転させますが、テキストアンカーに対する相対回転ではありません。そのため、テキスト要素にも x と y 属性が設定されている場合、テキストを画面外に回転させている可能性が高いです。例えば、試した場合。

<text x="200" y="100" transform="rotate(180)">Hello!</text>

の場合、テキストアンカーは⟨200,100⟩にあることになります。テキストアンカーを⟨200,100⟩に留めたければ、テキストを回転する前に変形を使用して位置を決め、それによって原点を変更することができます。

<text transform="translate(200,100)rotate(180)">Hello!</text>

もう一つの選択肢は、オプションの cx と cy の引数を、SVG の 回転変換 で、回転の原点を指定できるようにします。これは結局少し冗長になりますが、念のため、次のようになります。

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>