Apa perbedaan antara atribut x dan dx svg?

Apa perbedaan antara atribut x dan dx svg (atau y dan dy)? Kapan waktu yang tepat untuk menggunakan atribut pergeseran sumbu (dx) versus atribut lokasi (x)?

Misalnya, saya telah memperhatikan banyak contoh d3 melakukan hal seperti ini

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

Apa keuntungan atau alasan untuk menyetel y dan dy ketika berikut ini tampaknya melakukan hal yang sama?

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

xdan ymerupakan koordinat absolut dan dxdan dymerupakan koordinat relatif (relatif terhadap yang ditentukan xdan y).

Dalam pengalaman saya, tidak umum untuk menggunakan dxdan dypada <text>elemen (meskipun mungkin berguna untuk kemudahan pengkodean jika Anda, misalnya, memiliki beberapa kode untuk memposisikan teks dan kemudian memisahkan kode untuk menyesuaikannya).

dxdan dysangat berguna saat menggunakan <tspan>elemen yang disarangkan di dalam <text>elemen untuk membuat tata letak teks multi-baris yang lebih menarik.

Untuk lebih jelasnya Anda dapat melihat bagian Teks dari spesifikasi SVG .

Untuk menambah jawaban Scott, dy digunakan dengan em (unit ukuran font) sangat berguna untuk menyelaraskan teks secara vertikal relatif terhadap koordinat y absolut. Ini tercakup dalam contoh elemen teks dy MDN .

Menggunakan dy = 0.35em dapat membantu memusatkan teks secara vertikal terlepas dari ukuran fontnya. Ini juga membantu jika Anda ingin memutar bagian tengah teks Anda di sekitar titik yang dijelaskan oleh koordinat absolut Anda.

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

Lihat di Codepen

Jika Anda tidak menyertakan "dy = 0.35em", kata-kata akan berputar di sekitar bagian bawah teks dan setelah 180 sejajar di bawah tempat sebelum rotasi. Menyertakan "dy = 0.35em" akan memutarnya di sekitar tengah teks.

Perhatikan bahwa dy tidak dapat disetel menggunakan CSS.