Was ist der Unterschied zwischen dem x- und dem dx-Attribut von svg?

Was ist der Unterschied zwischen dem x- und dx-Attribut von svg (oder y und dy)? Wann wäre der richtige Zeitpunkt, um das Achsenverschiebungsattribut (dx) gegenüber dem Standortattribut (x) zu verwenden?

Zum Beispiel habe ich viele d3-Beispiele bemerkt, die so etwas tun

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

Was ist der Vorteil oder die Begründung für die Einstellung von y und dy, wenn das Folgende dasselbe zu tun scheint?

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

xund ysind absolute Koordinaten und dxund dysind relative Koordinaten (relativ zu den angegebenen xund y).

Nach meiner Erfahrung ist es nicht üblich, Elemente zu verwenden dxund dyzu <text>verwenden (obwohl dies für die Codierung hilfreich sein kann, wenn Sie beispielsweise Code zum Positionieren von Text und dann separaten Code zum Anpassen haben).

dxund dysind meistens nützlich, wenn Sie <tspan>Elemente verwenden, die in einem <text>Element verschachtelt sind , um schickere mehrzeilige Textlayouts zu erstellen.

Weitere Informationen finden Sie im Abschnitt Text der SVG-Spezifikation .

Um Scotts Antwort zu ergänzen, ist dy, das mit em (Schriftgrößeneinheiten) verwendet wird, sehr nützlich, um Text relativ zur absoluten y-Koordinate vertikal auszurichten. Dies wird im Beispiel für ein MDN-Dy-Textelement behandelt .

Mit dy = 0.35em können Sie Text unabhängig von der Schriftgröße vertikal zentrieren. Es ist auch hilfreich, wenn Sie die Mitte Ihres Textes um einen Punkt drehen möchten, der durch Ihre absoluten Koordinaten beschrieben wird.

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

Zeigen Sie es in Codepen an

Wenn Sie "dy = 0.35em" nicht einschließen, drehen sich die Wörter am unteren Rand des Textes und richten sich nach 180 unterhalb der Stelle aus, an der sie sich vor der Drehung befanden. Wenn Sie "dy = 0.35em" einschließen, werden sie um die Textmitte gedreht.

Beachten Sie, dass dy nicht mit CSS eingestellt werden kann.