Qual è la differenza tra gli attributi x e dx di svg?

Qual è la differenza tra gli attributi x e dx di svg (o y e dy)? Quando sarebbe il momento giusto per utilizzare l'attributo di spostamento dell'asse (dx) rispetto all'attributo di posizione (x)?

Ad esempio, ho notato molti esempi di d3 che fanno qualcosa di simile

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

Qual è il vantaggio o il ragionamento per impostare sia y che dy quando quanto segue sembra fare la stessa cosa?

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

xe ysono coordinate assolute e dxe dysono coordinate relative (relative a xe specificate y).

Nella mia esperienza, non è comune usare dxe dysugli <text>elementi (sebbene potrebbe essere utile per comodità di codifica se, ad esempio, si dispone del codice per il posizionamento del testo e quindi del codice separato per regolarlo).

dxe dysono utili soprattutto quando si usano <tspan>elementi annidati all'interno di un <text>elemento per stabilire layout di testo multilinea più elaborati.

Per maggiori dettagli puoi controllare la sezione Testo delle specifiche SVG .

Per aggiungere alla risposta di Scott, dy usato con em (unità di dimensione del carattere) è molto utile per allineare verticalmente il testo rispetto alla coordinata y assoluta. Questo è trattato nell'esempio dell'elemento di testo dy MDN .

L'uso di dy = 0.35em può aiutare a centrare verticalmente il testo indipendentemente dalla dimensione del carattere. Aiuta anche se vuoi ruotare il centro del tuo testo attorno a un punto descritto dalle tue coordinate assolute.

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

Guardalo in Codepen

Se non includi "dy = 0.35em", le parole ruotano intorno alla parte inferiore del testo e dopo 180 si allineano sotto dove si trovavano prima della rotazione. Includere "dy = 0.35em" li ruota attorno al centro del testo.

Nota che dy non può essere impostato utilizzando CSS.