एसवीजी के एक्स और डीएक्स विशेषता के बीच क्या अंतर है?

Question

एसवीजी के एक्स और डीएक्स विशेषता (या वाई और डीई) के बीच क्या अंतर है? स्थान विशेषता (x) बनाम अक्ष शिफ्ट विशेषता (डीएक्स) का उपयोग करने के लिए उचित समय कब होगा?

उदाहरण के लिए, मैं इस

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

क्या लाभ या दोनों y और डीवाई स्थापित करने के लिए तर्क है की तरह कुछ है जब निम्न एक ही बात करने के लिए लगता है कर d3 उदाहरण के एक बहुत देखा है?

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

Answer 1

x और y निरपेक्ष निर्देशांक हैं और dx और dy रिश्तेदार निर्देशांक (निर्दिष्ट x और y के सापेक्ष) कर रहे हैं।

मेरे अनुभव में, यह (यदि आप, उदाहरण के लिए, यह एडजस्ट करने के लिए स्थिति पाठ के लिए कुछ कोड और उसके बाद अलग-अलग कोड है, हालांकि यह सुविधा कोडिंग के लिए उपयोगी हो सकता है) <text> तत्वों पर dx और dy उपयोग करने के लिए आम नहीं है। जब <tspan> तत्वों एक <text> तत्व के अंदर नेस्टेड का उपयोग कर अधिक सजावटी बहु लाइन पाठ लेआउट स्थापित करने के लिए

dx और dy ज्यादातर उपयोगी होते हैं।

अधिक जानकारी के लिए आप Text section of the SVG spec देख सकते हैं।

Answer 2

स्कॉट के उत्तर में जोड़ने के लिए, एम (फ़ॉन्ट आकार इकाइयों) के साथ उपयोग किया जाने वाला डीई पूर्ण वाई समन्वय के सापेक्ष पाठ को लंबवत रूप से संरेखित करने के लिए बहुत उपयोगी है। यह D3 text element reference में अच्छी तरह से कवर किया गया है।

डीई = 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,height:300}); 

svg.append("line").attr({x1:0,x2:500,y1:100,y2:100}); 
svg.append("line").attr({x1:0,x2:500,y1:200,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> 

आप "डीवाई = 0.35em" शामिल नहीं है, तो शब्द पाठ के नीचे चारों ओर घूमने और जहां वे रोटेशन से पहले थे नीचे 180 संरेखित के बाद। "Dy = 0.35em" सहित उन्हें पाठ के केंद्र के चारों ओर घूमता है।

ध्यान दें कि सीई का उपयोग करके सेट नहीं किया जा सकता है।