83

私はd3とsvgのコーディングが初めてで、チャートのx軸でテキストを回転させる方法を探しています. 私の問題は、通常、xAxis のタイトルが棒グラフの棒よりも長いことです。したがって、テキストを回転させて、xAxis の下で (水平ではなく) 垂直に実行することを検討しています。

変換属性を追加しようとしました: .attr("transform", "rotate(180)")

しかし、それを行うと、テキストは完全に消えます。SVG キャンバスの高さを上げてみましたが、それでもテキストを表示できませんでした。

私が間違っていることについての考えは素晴らしいでしょう。x と y の位置も調整する必要がありますか? そして、もしそうなら、どのくらい（Firebugでそれを見ることができるとき、トラブルシューティングするのは難しい）.

4

3 に答える 3

174

回転 (180) の変換を設定すると、テキスト アンカーに対してではなく、原点に対して要素が回転します。そのため、テキスト要素に配置用の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>

もう 1 つのオプションは、オプションのcxおよびcy引数を SVG のrotate transformに使用して、回転の原点を指定できるようにすることです。これは少し冗長になりますが、完全を期すために、次のようになります。

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>
于 2012-06-29T06:30:11.047 に答える
46

他の場所から恥知らずに引き抜きました。すべて著者の功績です。

margin は、下マージンを増やす必要があることを示すためだけに含まれています。

var margin = {top: 30, right: 40, bottom: 50, left: 50},

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis)
     .selectAll("text")  
     .style("text-anchor", "end")
     .attr("dx", "-.8em")
     .attr("dy", ".15em")
     .attr("transform", "rotate(-65)");
于 2013-05-31T18:26:42.950 に答える