Was ist der Unterschied zwischen Svg x und dx Attribut?

Question

Was ist der Unterschied zwischen Svg's x und dx Attribut (oder y und dy)? Wann wäre ein geeigneter Zeitpunkt, um das Achsenverschiebungsattribut (dx) gegen das Ortsattribut (x) zu verwenden?

Zum Beispiel habe ich eine Menge von d3 Beispiele tun so etwas wie dieses

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

bemerkt Was ist der Vorteil oder Argumentation ist sowohl für die Einstellung y und dy, wenn die folgende scheint das gleiche zu tun?

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

Answer 1

x und y sind absolute Koordinaten und dx und dy sind relative Koordinaten (in Bezug auf die angegebene x und y).

Nach meiner Erfahrung ist es nicht üblich, dx und dy auf <text> Elemente zu verwenden (obwohl es für die Codierung Bequemlichkeit nützlich sein könnte, wenn Sie zum Beispiel einen Code für Textpositionierung und dann separaten Code es zur Einstellung).

dx und dy sind meist sinnvoll, wenn <tspan> Elemente innerhalb eines ausgefallenere mehrzeiligen Textlayouts zu etablieren <text> Elements verschachtelt.

Für weitere Details können Sie die Text section of the SVG spec überprüfen.

Answer 2

Um Scotts Antwort hinzuzufügen, ist dy, das mit em (font size units) verwendet wird, sehr nützlich, um Text relativ zur absoluten y-Koordinate vertikal auszurichten. Dies ist in der D3 text element reference gut abgedeckt.

Mit dy = 0.35em können Sie Texte unabhängig von der Schriftgröße vertikal zentrieren. Es hilft auch, wenn Sie den Mittelpunkt Ihres Textes um einen Punkt drehen möchten, der durch Ihre absoluten Koordinaten beschrieben wird.

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

Wenn Sie nicht enthalten „dy = 0.35em“ drehen sich die Wörter rund um den unteren Rand des Textes und nach 180 align unten, wo sie vor der Rotation waren. Einschließlich "dy = 0.35em" dreht sie um die Mitte des Textes.

Beachten Sie, dass dy nicht mit CSS festgelegt werden kann.