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> 没有影响。文本将围绕由xandy属性定义的 x,y 位置居中（由于 text-anchor=middle）（如果您不指定它们，它们默认为 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 回答