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

Question

私はd3とsvgコーディングが初めてで、チャートのxAxisでテキストを回転する方法を探しています。私の問題は、通常、xAxisのタイトルは棒グラフの棒よりも長く、幅が広いということです。だから私はxAxisの下で（水平ではなく）垂直に走るようにテキストを回転させたいと思っています。

私は、変換属性を追加しようとしました： .ATTR（ "変換"、 "回転（180）"）

をしかし、私はテキストが完全に消え、それを行うとき。私はSVGキャンバスの高さを上げようとしましたが、まだテキストを見ることができませんでした。

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

Answer 1

rotate（180）の変換を設定すると、テキストアンカーに対してではなく、の起点を基準にして要素が回転します。したがって、テキスト要素にもxとy属性が設定されている場合は、テキストを画面外に回転している可能性があります。たとえば、試した場合、

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

テキストアンカーは⟨-200,100 wouldになります。テキストアンカーを⟨200,100stayのままにしたい場合は、トランスフォームを使用してテキストを回転させてから原点を変更することができます。

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

別のオプションを使用すると、回転の起点を指定することができるように、SVGのrotate transformにオプションCXとCY引数を使用することです。これは、ビットは冗長なってしまうが、完全を期すために、それは次のようになります。

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

Answer 2

臆面もなく、elsewhereから作者へのすべてのクレジットを摘み取ら。

マージンを表示するには、マージンを大きくする必要があります。

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

Answer 3

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

d3fcは、コンポーネントによって使用される下位のデータ結合へのアクセスを可能にするdecorate patternを持つコンポーネントライブラリです。回転のみ入力選択に適用されること

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

注意：

それは次のように軸ラベルの回転が行われD3軸、のドロップイン置換を有します。

あなたはaxis documentation pageにこのパターンのいくつかの他の可能な用途を見ることができます。