d3のx軸テキストを回転します

Question 1

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

変換属性を追加してみました：.attr（ "transform"、 "rotate（180）"）

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

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

Question 2

回転（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変換に使用して、回転の原点を指定できるようにすることです。これは少し冗長になりますが、完全を期すために、次のようになります。

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

Question 3

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

下マージンを示すためだけに含まれるマージンを増やす必要があります。

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)");

Question 4

この回転するD3軸ラベルの問題の1つは、軸をレンダリングするたびにこのロジックを再適用する必要があることです。これは、軸が目盛りとラベルをレンダリングするために使用するenter-update-exit選択にアクセスできないためです。

d3fcは、コンポーネントで使用される基になるデータ結合にアクセスできるようにするデコレーションパターンを持つコンポーネントライブラリです。

D3軸のドロップイン置換があり、軸ラベルの回転は次のように実行されます。

var axis = fc.axisBottom()
  .scale(scaleBand)
  .decorate(function(s) {
    s.enter()
        .select('text')
        .style('text-anchor', 'start')
        .attr('transform', 'rotate(45 -10 10)');
  });

回転は入力選択にのみ適用されることに注意してください。

このパターンのその他の考えられる使用法は、軸のドキュメントページで確認できます。