Jaka jest różnica między atrybutem x i dx svg (lub y i dy)? Kiedy byłby właściwy moment na użycie atrybutu przesunięcia osi (dx) w porównaniu z atrybutem lokalizacji (x)?
Na przykład zauważyłem, że wiele przykładów d3 robi coś takiego
chart.append("text")
.attr("x", 0)
.attr("y", 0)
.attr("dy", -3)
.text("I am a label")
Jaka jest korzyść lub uzasadnienie ustawienia zarówno y, jak i dy, gdy następujące wydaje się robić to samo?
chart.append("text")
.attr("x", 0)
.attr("y", -3)
.text("I am a label")
d3.js
r. Służy do łączenia różnych jednostek. Na przykładx="3" dx="0.5em"
co wynosi 3 piksele + pół linii tekstu.Aby dodać do odpowiedzi Scotta, funkcja dy używana z em (jednostki rozmiaru czcionki) jest bardzo przydatna do wyrównywania tekstu w pionie względem bezwzględnej współrzędnej y. Jest to omówione w przykładzie elementu tekstowego MDN dy .
Użycie dy = 0.35em może pomóc w wyśrodkowaniu tekstu w pionie niezależnie od rozmiaru czcionki. Jest to również pomocne, jeśli chcesz obrócić środek tekstu wokół punktu opisanego przez Twoje współrzędne bezwzględne.
Zobacz w Codepen
Jeśli nie dodasz „dy = 0.35em”, słowa będą się obracać wokół dołu tekstu i po 180 stopniach wyrównywane poniżej miejsca, w którym znajdowały się przed obróceniem. Włączenie „dy = 0.35em” powoduje obrócenie ich wokół środka tekstu.
Pamiętaj, że dy nie można ustawić za pomocą CSS.
źródło