Question

我正在尝试将我的文字Y标签定位为从上到下 - 我让它从下到上工作但改变旋转不是为我做的

这是我的Plunkr - http://plnkr.co/edit/ghP0armaGK7NYhZfhzTs?p=preview

感兴趣的代码是

 svg.append("text")
          .attr("class", "y label")
          .attr("text-anchor", "end")
          .attr("y", -width/12 )
          .attr("x", -height/3) 
          .attr("dx","-5em")
          .attr("dy", "-.75em")
          .attr("transform", "rotate(-90)")
          .text(yLabel);

使用-90 Y标签“Value”从下到上，但我想要的是“顶部”到“底部”。

（我试过-270才看到文字被撞出屏幕。我显然不明白旋转变换是如何工作的）

由于

Answer 1

旋转后，您需要按y轴偏移和高度偏移（文本围绕指定的x和y旋转元素，而不是所期望的显示文本的中心）来翻译文本。例如，修改您的翻译就可以完成这项工作（您将要适当地使用您的变量，我只是插入了作为示例的数字）：

.attr("transform", "translate(-75, 350) rotate(90)")

您还可以修改x和y，使其成为文本元素的中心（使用dx和dy进行相应的偏移），以便文本旋转围绕中心点，这可能是更干净的方法，但我倾向于做一个翻译修复，并在我的路上。

Answer 2

绝对没有必要计算旋转元素的偏移量。你只会得到一个丑陋的数字混合物，对任何人都没有意义，并且将成为维持的噩梦。

SVG渲染器可以为您完成所有这些计算。只需使用<g>元素将坐标原点转换为您感兴趣的位置，然后进行旋转。然后，这个元素的所有物质都将围绕它旋转，而不是围绕一些遥远的无关位置旋转。

这是一个快速的黑客，向您展示它是如何工作的。您可能需要调整一些值，但我希望您能了解到这一点。

svg.append("g")
.attr("transform", "translate(-"+width*0.1+","+height*0.45+")")
.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("transform", "rotate(-90)")
.text(yLabel);

如何更改svg文本的方向

2 个答案: