d3 में एक्स अक्ष पाठ घुमाएँ

Question

मैं d3 और svg कोडिंग के लिए नया हूं और एक चार्ट के xAxis पर पाठ को घुमाने का एक तरीका ढूंढ रहा हूं। मेरी समस्या यह है कि आम तौर पर एक्सएक्सिस शीर्षक बार चार्ट में बार की तुलना में अधिक लंबे होते हैं। इसलिए मैं एक्सएक्सिस के नीचे लंबवत (क्षैतिज रूप से) चलाने के लिए पाठ को घुमाना चाहता हूं।

मैंने ट्रांस्फ़ॉर्म विशेषता जोड़ने की कोशिश की है: .attr ("ट्रांसफ़ॉर्म", "रोटेट (180)")

लेकिन जब मैं ऐसा करता हूं, तो पाठ पूरी तरह से गायब हो जाता है। मैंने svg कैनवास की ऊंचाई बढ़ाने की कोशिश की है, लेकिन फिर भी पाठ को देखने में असमर्थ था।

जो मैं गलत कर रहा हूं उस पर कोई विचार बहुत अच्छा होगा। क्या मुझे x और y स्थितियों को समायोजित करने की भी आवश्यकता है? और, यदि ऐसा है, तो कितना (जब मैं फायरबग में देख सकता हूं तो इसका निवारण करना मुश्किल है)।

Answer 1

यदि आप घुमाव (180) का रूपांतरण सेट करते हैं, तो यह मूल के सापेक्ष तत्व को घुमाता है , पाठ एंकर के सापेक्ष नहीं। इसलिए, यदि आपके टेक्स्ट एलिमेंट्स में उन्हें रखने के लिए एक x और y एट्रीब्यूट सेट है, तो यह काफी संभावना है कि आपने टेक्स्ट को ऑफ-स्क्रीन घुमाया हो। उदाहरण के लिए, यदि आपने कोशिश की,

<text x="200" y="100" transform="rotate(180)">Hello!</text>

टेक्स्ट एंकर ⟨-200,100 be पर होगा। यदि आप चाहते हैं कि टेक्स्ट एंकर ⟩200,100 then पर रहे, तो आप टेक्स्ट को घुमाने से पहले स्थिति को बदलने के लिए उपयोग कर सकते हैं, जिससे मूल बदल जाएगा।

<text transform="translate(200,100)rotate(180)">Hello!</text>

एक अन्य विकल्प एसवीजी के घुमाव परिवर्तन के लिए वैकल्पिक सीएक्स और साइबर तर्कों का उपयोग करना है , ताकि आप रोटेशन की उत्पत्ति को निर्दिष्ट कर सकें। यह कुछ हद तक बेमानी है, लेकिन पूर्णता के लिए, यह इस तरह दिखता है:

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>

Comments

ठीक है तो यह एकदम सही है। धन्यवाद, माइक। यह (लगभग) सब कुछ मुझे करने की ज़रूरत है। लेकिन अब सवाल यह है कि मैं चर की लंबाई के आधार पर स्वचालित रूप से y स्थिति कैसे बदल सकता हूं? यदि मैं आधार रेखा को इस प्रकार निर्धारित करता हूं: <text font-size = "12px" transform = "Translate (20,170) रोटेट (-90)"> शीर्षक 1 </ टेक्स्ट>। कोई बात नहीं। लेकिन कहते हैं कि अगला शीर्षक लंबा है मैं नहीं चाहता कि यह ग्राफ को ओवरलैप करे और मैं एक्सएक्सिस और ग्राफ के बीच के स्थान को भी कम से कम करना चाहता हूं।

— jschlereth

यदि मैंने आपके प्रश्न का उत्तर दिया है, तो कृपया प्रश्न के उत्तर के रूप में चिह्नित करने के लिए एक चेकबॉक्स जोड़ें। यदि आपके पास कोई अतिरिक्त प्रश्न है, तो कृपया एक नया प्रश्न बनाएं! मुझे लगता है कि आप पाठ संरेखण सेट करने के लिए पाठ-एंकर विशेषता के बारे में पूछ सकते हैं, या संभवतः पाठ की आधार रेखा सेट करने के लिए डाई विशेषता।

— mbostock

समझ गया ... टेक्स्ट-एंकर = 'एंड' <टेक्स्ट टेक्स्ट-एंकर = "एंड" ट्रांसफॉर्म = "ट्रांसलेट (20,130) रोटेट (-90)"> टाइटल 1 </ टेक्स्ट> मदद के लिए फिर से धन्यवाद, माइक। आपने धमाल मचाया!

— jschlereth

Answer 2

बेशर्मी से कहीं और से , सारा श्रेय लेखक को जाता है।

केवल मार्जिन दिखाने के लिए शामिल मार्जिन को बढ़ाया जाना चाहिए।

var margin = {top: 30, right: 40, bottom: 50, left: 50},

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis)
     .selectAll("text")  
     .style("text-anchor", "end")
     .attr("dx", "-.8em")
     .attr("dy", ".15em")
     .attr("transform", "rotate(-65)");

Answer 3

इस घूर्णन डी 3 अक्ष लेबल के साथ एक समस्या यह है कि आपको हर बार इस तर्क को लागू करना होगा जब आप अक्ष प्रस्तुत करते हैं। इसका कारण यह है कि आपके पास एंटर-अपडेट-एग्जिट चयनों तक पहुंच नहीं है जो अक्ष टिक्स और लेबल्स को रेंडर करने के लिए उपयोग करता है।

d3fc एक घटक पुस्तकालय है जिसमें एक सजा पैटर्न है जो आपको घटकों द्वारा उपयोग किए जाने वाले अंडरलिंग डेटा से जुड़ने की अनुमति देता है।

यह डी 3 अक्ष के लिए एक ड्रॉप-इन प्रतिस्थापन है, जहां अक्ष लेबल रोटेशन निम्नानुसार किया जाता है:

var axis = fc.axisBottom()
  .scale(scaleBand)
  .decorate(function(s) {
    s.enter()
        .select('text')
        .style('text-anchor', 'start')
        .attr('transform', 'rotate(45 -10 10)');
  });

ध्यान दें कि रोटेशन केवल प्रवेश चयन पर लागू होता है।

आप अक्ष प्रलेखन पृष्ठ पर इस पैटर्न के लिए कुछ अन्य संभावित उपयोग देख सकते हैं ।