อะไรคือความแตกต่างระหว่างแอตทริบิวต์ x และ dx ของ svg?

อะไรคือความแตกต่างระหว่างแอตทริบิวต์ x และ dx ของ svg (หรือ y และ dy) เวลาที่เหมาะสมในการใช้แอตทริบิวต์การเลื่อนแกน (dx) เทียบกับแอตทริบิวต์ตำแหน่ง (x) เมื่อใด

ตัวอย่างเช่นฉันสังเกตเห็นตัวอย่าง d3 จำนวนมากที่ทำอะไรแบบนี้

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

ข้อดีหรือเหตุผลในการตั้งค่าทั้ง y และ dy คืออะไรเมื่อสิ่งต่อไปนี้ดูเหมือนจะทำสิ่งเดียวกัน

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

xและyเป็นพิกัดที่แน่นอนdxและdyเป็นพิกัดสัมพัทธ์ (เทียบกับที่ระบุxและy)

จากประสบการณ์ของผมมันไม่ได้เป็นเรื่องธรรมดาที่จะใช้dxและdyบน<text>องค์ประกอบ (แม้ว่ามันอาจจะมีประโยชน์สำหรับการเข้ารหัสความสะดวกสบายถ้าคุณยกตัวอย่างเช่นมีรหัสบางอย่างสำหรับการวางตำแหน่งของข้อความและรหัสแล้วแยกต่างหากสำหรับการปรับ)

dxและdyมีประโยชน์มากเมื่อใช้<tspan>องค์ประกอบที่ซ้อนอยู่ภายใน<text>องค์ประกอบเพื่อสร้างเค้าโครงข้อความหลายบรรทัดที่สวยงามยิ่งขึ้น

สำหรับรายละเอียดเพิ่มเติมที่คุณสามารถตรวจสอบส่วนข้อความของสเป็คแล้ว SVG

เพื่อเพิ่มคำตอบของ Scott dy ที่ใช้กับ em (หน่วยขนาดฟอนต์) มีประโยชน์มากสำหรับการจัดแนวข้อความในแนวตั้งโดยสัมพันธ์กับพิกัด y สัมบูรณ์ นี้จะครอบคลุมในMDN ข้อความ DY ตัวอย่างองค์ประกอบ

การใช้ dy = 0.35em สามารถช่วยให้ข้อความอยู่กึ่งกลางแนวตั้งโดยไม่คำนึงถึงขนาดตัวอักษร นอกจากนี้ยังช่วยในกรณีที่คุณต้องการหมุนตรงกลางของข้อความไปรอบ ๆ จุดที่อธิบายโดยพิกัดสัมบูรณ์ของคุณ

<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

หากคุณไม่รวม "dy = 0.35em" คำจะหมุนรอบด้านล่างของข้อความและหลังจาก 180 จัดแนวด้านล่างซึ่งอยู่ก่อนการหมุน การรวม "dy = 0.35em" จะหมุนรอบ ๆ กึ่งกลางของข้อความ

โปรดทราบว่าไม่สามารถตั้งค่า dy โดยใช้ CSS