svg的x和dx属性有什么区别？
svg的x和dx属性（或y和dy）有什么区别？ 什么时候使用axis shift属性（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")
x和y是绝对坐标， dx和dy是相对坐标（相对于指定的x和y ）。
根据我的经验，在<text>元素上使用dx和dy并不常见（但是，如果您有一些代码来定位文本，然后单独调整代码，那么它对于编码便利性可能是有用的）。
使用嵌套在<text>元素中的<tspan>元素来build立更有趣的多行文本布局时， dx和dy是最有用的。
有关更多详细信息，可以查看SVG规范的文本部分 。
要添加到斯科特的答案，DY与em（字体大小单位）使用是非常有用的垂直alignment文本相对于绝对的Y坐标。 这在D3文本元素引用中已经很好地涵盖了。
使用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,height:300}); svg.append("line").attr({x1:0,x2:500,y1:100,y2:100}); svg.append("line").attr({x1:0,x2:500,y1:200,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>
如果不包含“dy = 0.35em”，则围绕文本底部旋转的单词将在旋转之前的180度以下alignment。 包括“dy = 0.35em”围绕文本的中心旋转。
请注意，dy不能使用CSS设置。
