Qual è la differenza tra l'attributo svg x e ​​dx?

Question

Qual è la differenza tra l'attributo svg x e ​​dx (o y e dy)? Quando sarebbe il momento giusto per utilizzare l'attributo shift dell'asse (dx) rispetto all'attributo location (x)?

Per esempio, ho notato un sacco di esempi D3 fare 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 l'impostazione sia ye dy quando il seguente sembra fare la stessa cosa?

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

Answer 1

x e y sono coordinate assolute e dx e dy sono coordinate relative (relative alla specificato x e y).

Nella mia esperienza, non è comune l'uso di dx e dy su <text> elementi (anche se potrebbe essere utile per la codifica convenienza se, ad esempio, dispone di un codice per il testo il posizionamento e il codice poi separato per adeguandolo).

dx e dy sono particolarmente utile quando si utilizzano <tspan> elementi annidati all'interno di un elemento <text> stabilire reagirà layout di testo multilinea.

Per ulteriori dettagli è possibile controllare il Text section of the SVG spec.

Answer 2

Per aggiungere alla risposta di Scott, dy utilizzato con em (unità di dimensione carattere) è molto utile per allineare verticalmente il testo rispetto alla coordinata y assoluta. Questo è ben trattato nel D3 text element reference.

L'utilizzo di dy = 0.35em può aiutare a centrare verticalmente il testo indipendentemente dalle dimensioni 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,height:300}); 

svg.append("line").attr({x1:0,x2:500,y1:100,y2:100}); 
svg.append("line").attr({x1:0,x2:500,y1:200,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> 

Se non si include "dy = 0.35em", le parole ruotano intorno alla parte inferiore del testo e dopo 180 align sotto dove erano prima rotazione. Includendo "dy = 0.35em" li ruota attorno al centro del testo.

Si noti che dy non può essere impostato tramite CSS.