Svg'nin x ve dx niteliği arasındaki fark nedir?

Svg'nin x ve dx niteliği (veya y ve dy) arasındaki fark nedir? Konum özelliğine (x) karşı eksen kaydırma özelliğini (dx) kullanmak için ne zaman uygun bir zaman olur?

Örneğin, böyle bir şey yapan birçok d3 örneği fark ettim

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

Aşağıdakiler aynı şeyi yapıyor gibi göründüğünde hem y hem de dy'yi ayarlamanın avantajı veya gerekçesi nedir?

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

xve ymutlak koordinatlar ve dxve dy(belirtilen göreli göreli koordinatlarıdır xve y).

Tecrübelerime göre, kullanımı yaygın değildir dxve dyüzerinde <text>(eğer, örneğin, bunu ayarlamak için metin ve ardından ayrı kod konumlandırılması için bazı kodlar varsa kolaylık kodlama için yararlı olabilir rağmen) elemanları.

dxve dydaha güzel çok satırlı metin düzenleri oluşturmak için <tspan>bir <text>öğenin içine yerleştirilmiş öğeleri kullanırken çoğunlukla yararlıdır .

Daha fazla ayrıntı için SVG spesifikasyonunun Metin bölümüne göz atabilirsiniz .

Scott'ın cevabına eklemek için em ile kullanılan dy (yazı tipi boyutu birimleri), metni mutlak y koordinatına göre dikey olarak hizalamak için çok kullanışlıdır. Bu, MDN dy metin öğesi örneğinde ele alınmıştır .

Dy = 0.35em kullanmak, yazı tipi boyutundan bağımsız olarak metnin dikey olarak ortalanmasına yardımcı olabilir. Metninizin merkezini, mutlak koordinatlarınız tarafından tanımlanan bir nokta etrafında döndürmek istemeniz de yardımcı olur.

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

Codepen'de görüntüleyin

"Dy = 0.35em" eklemezseniz, kelimeler metnin altında döner ve 180'den sonra döndürmeden önce oldukları yerin altına hizalanır. "Dy = 0.35em" dahil edildiğinde, bunlar metnin merkezi çevresinde döndürülür.

Dy'nin CSS kullanılarak ayarlanamayacağını unutmayın.