¿Cuál es la diferencia entre el atributo x y dx de svg?

¿Cuál es la diferencia entre el atributo x y dx de svg (o y y dy)? ¿Cuándo sería el momento adecuado para utilizar el atributo de desplazamiento del eje (dx) frente al atributo de ubicación (x)?

Por ejemplo, he notado muchos ejemplos de d3 haciendo algo como esto

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

¿Cuál es la ventaja o el razonamiento para establecer tanto y como dy cuando lo siguiente parece hacer lo mismo?

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

xy yson coordenadas absolutas y dxy dyson coordenadas relativas (relativas al xy especificado y).

En mi experiencia, no es común usar dxy dyen <text>elementos (aunque podría ser útil para la conveniencia de codificar si, por ejemplo, tiene algún código para posicionar texto y luego código separado para ajustarlo).

dxy dyson sobre todo útiles cuando se utilizan <tspan>elementos anidados dentro de un <text>elemento para establecer diseños de texto de varias líneas más elegantes.

Para obtener más detalles, puede consultar la sección Texto de la especificación SVG .

Para agregar a la respuesta de Scott, dy usado con em (unidades de tamaño de fuente) es muy útil para alinear verticalmente el texto en relación con la coordenada y absoluta. Esto se trata en el ejemplo del elemento de texto MDN dy .

El uso de dy = 0.35em puede ayudar a centrar el texto verticalmente independientemente del tamaño de fuente. También ayuda si desea rotar el centro de su texto alrededor de un punto descrito por sus coordenadas absolutas.

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

Verlo en Codepen

Si no incluye "dy = 0.35em", las palabras rotan alrededor de la parte inferior del texto y después de 180 se alinean debajo de donde estaban antes de la rotación. Incluir "dy = 0.35em" los rota alrededor del centro del texto.

Tenga en cuenta que dy no se puede configurar con CSS.