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")
d3.js
es zum Kombinieren verschiedener Einheiten verwendet wird. Wiex="3" dx="0.5em"
das entspricht 3 Pixel + eine halbe Textzeile.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.
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.
quelle