[英]What is the difference between svg's x and dx attribute?
What is the difference between svg's x and dx attribute (or y and dy)? svg的x和dx属性(或y和dy)有什么区别? When would be a proper time to use the axis shift attribute (dx) versus the location attribute (x)?
何时适合使用轴移位属性(dx)与位置属性(x)?
For example, I have noticed a lot of d3 examples doing something like this 例如,我注意到很多d3示例正在做这样的事情
chart.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("dy", -3)
.text("I am a label")
What is the advantage or reasoning for setting both y and dy when the following seems to do the same thing? 当以下似乎做同样的事情时,设置y和dy的优点或原因是什么?
chart.append("text")
.attr("x", 0)
.attr("y", -3)
.text("I am a label")
x
and y
are absolute coordinates and dx
and dy
are relative coordinates (relative to the specified x
and y
). x
和y
是绝对坐标, dx
和dy
是相对坐标(相对于指定的x
和y
)。
In my experience, it is not common to use dx
and dy
on <text>
elements (although it might be useful for coding convenience if you, for example, have some code for positioning text and then separate code for adjusting it). 根据我的经验,在
<text>
元素上使用dx
和dy
并不常见(例如,如果你有一些代码用于定位文本然后单独的代码来调整它,那么它可能对编码方便有用)。
dx
and dy
are mostly useful when using <tspan>
elements nested inside a <text>
element to establish fancier multi-line text layouts. 当使用嵌套在
<text>
元素内的<tspan>
元素来建立更高级的多行文本布局时, dx
和dy
非常有用。
For more details you can check out the Text section of the SVG spec . 有关更多详细信息,请查看SVG规范的文本部分 。
To add to Scott's answer, dy used with em (font size units) is very useful for vertically aligning text relative to the absolute y coordinate. 要添加到Scott的答案中,与em(字体大小单位)一起使用的dy对于相对于绝对y坐标垂直对齐文本非常有用。 This is covered in the MDN dy text element example .
这在MDN dy文本元素示例中介绍 。
Using dy=0.35em can help vertically centre text regardless of font size. 无论字体大小如何,使用dy = 0.35em都可以帮助垂直居中显示文本。 It also helps if you want to rotate the centre of your text around a point described by your absolute coordinates.
如果要围绕绝对坐标描述的点旋转文本中心,也会有所帮助。
<style>
text { fill: black; text-anchor: middle; }
line { stroke-width: 1; stroke: lightgray; }
</style>
<script>
dataset = d3.range(50,500,50);
svg = d3.select("body").append("svg");
svg.attr('width',500).attr('height', 500);
svg.append("line").attr('x1', 0).attr('x2', 500).attr('y1', 100).attr('y2', 100);
svg.append("line").attr('x1', 0).attr('x2', 500).attr('y1', 200).attr('y2', 200);
group = svg.selectAll("g")
.data(dataset)
.enter()
.append("g");
// Without the dy=0.35em offset
group.append("text")
.text("My text")
.attr("x",function (d) {return d;})
.attr("y",100)
.attr("transform", function(d, i) {return "rotate("+45*i+","+d+",100)";});
// With the dy=0.35em offset
group.append("text")
.text("My text")
.attr("x",function (d) {return d;})
.attr("y",200)
.attr("dy","0.35em")
.attr("transform", function(d, i) {return "rotate("+45*i+","+d+",200)";});
<script>
View it in Codepen 在Codepen中查看它
If you don't include "dy=0.35em", the words rotate around the bottom of the text and after 180 align below where they were before rotation. 如果不包含“dy = 0.35em”,则单词会在文本底部周围旋转,并在旋转前的180对齐位置。 Including "dy=0.35em" rotates them around the centre of the text.
包括“dy = 0.35em”将它们围绕文本的中心旋转。
Note that dy can't be set using CSS. 请注意,无法使用CSS设置dy。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.