118

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")
4

2 回答 2

104

xandy是绝对坐标，dxanddy是相对坐标（相对于指定的xand y）。

根据我的经验，在元素上使用dxand并不常见（尽管它可能对编码方便很有用，例如，如果您有一些用于定位文本的代码，然后使用单独的代码来调整它）。dy<text>

dx并且在使用嵌套在元素中的元素来建立更漂亮的多行文本布局dy时非常有用。<tspan><text>

有关更多详细信息，您可以查看SVG 规范的文本部分。

于 2013-10-01T22:52:05.723 回答
75

为了补充斯科特的答案，与 em （字体大小单位）一起使用的 dy 对于相对于绝对 y 坐标垂直对齐文本非常有用。这在MDN dy 文本元素示例中有所介绍。

使用 dy=0.35em 可以帮助垂直居中文本，而不管字体大小。如果您想围绕绝对坐标描述的点旋转文本的中心，这也很有帮助。

<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.35em”，则文字将围绕文本底部旋转，并在 180 之后对齐到旋转之前的位置下方。包括 "dy=0.35em" 会使它们围绕文本的中心旋转。

请注意，无法使用 CSS 设置 dy。

于 2013-10-02T15:15:08.980 回答