Svg की x और dx विशेषता में क्या अंतर है?

Question

Svg की x और dx विशेषता (या y और dy) में क्या अंतर है? स्थान विशेषता (x) बनाम अक्ष परिवर्तन विशेषता (dx) का उपयोग करने का उचित समय कब होगा?

उदाहरण के लिए, मैंने बहुत सारे डी 3 उदाहरणों पर ध्यान दिया है जो कुछ इस तरह से कर रहे हैं

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

निम्नलिखित के समान कार्य करने पर लगता है कि y और डाई दोनों को सेट करने के लिए क्या लाभ या तर्क है?

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

Answer 1

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

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

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

अधिक जानकारी के लिए आप एसवीजी कल्पना के पाठ अनुभाग की जांच कर सकते हैं ।

Comments

मुझे ऐसा लगता है कि d3.js, इसका उपयोग विभिन्न इकाइयों के संयोजन के लिए किया जाता है। जैसे x="3" dx="0.5em"कि 3 पिक्सल + आधी टेक्स्ट लाइन कितनी है।

— आर्थर

Answer 2

स्कॉट के उत्तर में जोड़ने के लिए, इम (फॉन्ट साइज यूनिट्स) के साथ डाई का उपयोग निरपेक्ष y समन्वय के सापेक्ष पाठ संरेखित करने के लिए बहुत उपयोगी है। यह MDN डाई टेक्स्ट एलिमेंट उदाहरण में कवर किया गया है ।

डाई = 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>

कोडपेन में देखें

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

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

Comments

यदि कोई अन्य व्यक्ति इसमें भाग लेता है, तो जब तक मैं svg = d3.select ("body") सेट नहीं करता, मुझे यह काम नहीं मिल सकता है। परिशिष्ट ("svg"); और फिर अगली पंक्ति में अटर को किया। svg.attr ({चौड़ाई: 500, ऊंचाई: 300}) ;. साझा करने के लिए धन्यवाद!

— चक एल