web-dev-qa-db-fra.com

Quelle est la différence entre les attributs x et dx de svg?

Quelle est la différence entre les attributs x et dx de svg (ou y et dy)? Quand serait-il temps d'utiliser l'attribut décalage d'axe (dx) par rapport à l'attribut location (x)?

Par exemple, j'ai remarqué beaucoup d'exemples d3 faisant quelque chose comme ceci

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

Quel est l’avantage ou le raisonnement pour régler à la fois y et dy quand ce qui suit semble faire la même chose?

chart.append("text")
   .attr("x", 0)
   .attr("y", -3)
   .text("I am a label")
svgd3.js
97
Nathan Reese

x et y sont des coordonnées absolues et dx et dy sont des coordonnées relatives (par rapport à la spécification x et y).

D'après mon expérience, il n'est pas courant d'utiliser dx et dy sur <text> éléments (bien que cela puisse être utile pour la commodité du codage si, par exemple, vous avez du code pour positionner le texte puis un code séparé pour l’ajuster).

dx et dy sont surtout utiles lorsque vous utilisez <tspan> éléments imbriqués dans un <text> élément pour établir des mises en page de texte multilignes plus sophistiquées.

Pour plus de détails, vous pouvez consulter le section Texte de la spécification SVG .

88
Scott Cameron

Pour ajouter à la réponse de Scott, l'utilisation de dy avec em (unités de taille de police) est très utile pour aligner verticalement le texte par rapport à la coordonnée y absolue. Ceci est couvert dans le exemple d'élément de texte MDN dy .

L'utilisation de dy = 0.35em peut aider à centrer le texte verticalement, quelle que soit la taille de la police. Il est également utile si vous souhaitez faire pivoter le centre de votre texte autour d'un point décrit par vos coordonnées absolues.

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

Voir à Codepen

Si vous n'incluez pas "dy = 0.35em", les mots tournent autour du bas du texte et, après 180, s'alignent ci-dessous à l'endroit où ils se trouvaient avant la rotation. Y compris "dy = 0.35em" les fait pivoter autour du centre du texte.

Notez que dy ne peut pas être défini avec CSS.

67
angus l