6

D3 を使用して、-90 度回転し、Y 軸を中心とする Y 軸ラベルが必要です。これは簡単なことだと思い、次のように書きました。

// Y Axis Label
svg.append('svg:text')
    .attr('class', 'y label')
    .attr('text-anchor', 'middle')
    .attr('y', 0)
    .attr('width', height)
    .attr('transform', 'translate(-' + yAxisSpacing + ',' + height + ') rotate(-90)')
    .text('Y Axis Label')

heightこの場合、グラフの高さ (svg が占める垂直領域) です。上記のコードは、<text>要素をグラフの左下にレンダリングし、その左下の点を基準にしてテキストを中央に配置します。は変更されwidthないため、中央に配置される代わりに、SVG の左下隅からはみ出します。

widthがグラフの と等しい場合、heightその中のテキストは垂直方向に中央揃えになると推測していました。そうではないようです-または-要素で機能display:blockするために、SVGで設定する必要があるいくつかの魔法のタイプのプロパティがあります。width<text>

これはどのように行うべきですか？

応答に基づいて、javascript ルートを使用し、上記の行を (height/2) に変更しました...

.attr('transform', 'translate(-' + yAxisSpacing + ',' + height / 2 + ') rotate(-90)')
4

2 に答える 2

5

SVG 1.1 では、width属性は <text> に影響しません。テキストは (text-anchor=middle により)xおよびy属性で定義された x、y 位置を中心に配置されます (指定しない場合、デフォルトで 0 になります)。その後、transform属性が適用されます。

于 2012-08-28T06:36:22.037 に答える
1

これは、CSS トランスフォームを使用して行うことができます。これを CSS に追加します ( http://css3please.com経由):

-webkit-transform: rotate(90deg); 
   -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
        transform: rotate(90deg); 
           filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                 M11=6.123031769111886e-17, M12=-1, M21=1, M22=6.123031769111886e-17, sizingMethod='auto expand');
             zoom: 1;

ここでの作業例 - 「css」タブを見てください: http://livecoding.io/3492918

于 2012-08-27T22:27:18.500 に答える