web-dev-qa-db-ja.com

d3のx軸テキストを回転

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

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

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

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

textsvgtransformd3.js
72
jschlereth

Rotate（180）の変換を設定すると、要素はテキストアンカーではなくOriginに対して回転します。そのため、テキスト要素にxおよびy属性が設定されていて、それらを配置している場合は、回転した可能性が高い画面外のテキスト。たとえば、試した場合、

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

テキストアンカーは⟨-200,100⟩になります。テキストアンカーを⟨200,100⟩のままにする場合は、変換を使用してテキストを回転する前に配置し、それによりOriginを変更できます。

<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>
153
mbostock

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)");
41
20man

この回転する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)');
  });

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

enter image description here

axis documentation page で、このパターンの他の可能な用途を見ることができます。

1
ColinE