Svg 的 x 和 dx 属性之间的区别是什么？

Svg 的 x 和 dx 属性(或 y 和 dy)之间的区别是什么？什么时候适合使用轴移位属性(dx)和位置属性(x) ？

例如，我注意到很多 d3示例都是这样做的

chart.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("dy", -3)
.text("I am a label")

当下面的代码似乎做同样的事情时，设置 y 和 dy 的优点或推理是什么？

chart.append("text")
.attr("x", 0)
.attr("y", -3)
.text("I am a label")

svg
d3.js

55928 次浏览

小开

最佳答案

x和 y是绝对坐标，dx和 dy是相对坐标(相对于指定的 x和 y)。

根据我的经验，在 <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.

更多细节，你可以查看 SVG 规范的文本部分。

小开

为了补充 Scott 的答案，与 em (字体大小单位)一起使用 dy 对于文本相对于绝对 y 坐标的垂直对齐非常有用。这是在文本元素示例中提到的。

使用 dy = 0.35 em 可以帮助文本垂直居中，而不管字体大小如何。如果您希望围绕绝对坐标所描述的点旋转文本的中心，那么它也会有所帮助。

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

在 Codepen 观看

如果不包括“ dy = 0.35 em”，单词在文本底部旋转，180后在旋转之前的位置对齐。包括“ dy = 0.35 em”在内，它们围绕文本中心旋转。

注意，dy 不能用 CSS 设置。