Jaka jest różnica między atrybutem x i dx svg?

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

xi ysą współrzędnymi bezwzględnymi dxi dysą współrzędnymi względnymi (względem podanego xi y).

Z mojego doświadczenia wynika, że ​​nie jest powszechne używanie dxi dyna <text>elementach (chociaż może to być przydatne dla wygody kodowania, jeśli na przykład masz kod do pozycjonowania tekstu, a następnie osobny kod do dostosowywania).

dxi dysą szczególnie przydatne, gdy używa się <tspan>elementów zagnieżdżonych wewnątrz <text>elementu, aby stworzyć bardziej wyszukane wieloliniowe układy tekstu.

Aby uzyskać więcej informacji, zapoznaj się z sekcją Tekst specyfikacji SVG .

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.

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

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.