में 90º घुमावदार पाठ को कैसे केंद्रित करें डी 3 के साथ काम करना, मैं एक वाई अक्ष लेबल चाहता हूं जो घुमाए गए -90 डिग्री और वाई अक्ष पर केंद्रित है। मुझे लगा कि यह केक का एक टुकड़ा होगा, और निम्नलिखित लिखा है:एसवीजी
// Y Axis Label
svg.append('svg:text')
.attr('class', 'y label')
.attr('text-anchor', 'middle')
.attr('y', 0)
.attr('width', height)
.attr('transform', 'translate(-' + yAxisSpacing + ',' + height + ') rotate(-90)')
.text('Y Axis Label')
height
इस मामले में चार्ट (ऊर्ध्वाधर क्षेत्र svg के कब्जे में) की ऊंचाई है। उपर्युक्त कोड चार्ट के निचले बाएं हिस्से में <text>
तत्व प्रस्तुत करेगा, फिर उस निचले बाएं बिंदु से संबंधित पाठ को केंद्रित करेगा। width
परिवर्तन नहीं करता है और इस प्रकार केंद्रित होने के बजाय यह svg के निचले बाएं कोने से बाहर चला जाता है।
मैंने अनुमान लगाया था कि यदि width
चार्ट के height
के बराबर था, तो उसके अंदर का पाठ लंबवत केंद्रित हो जाएगा। ऐसा लगता है कि यह मामला नहीं है- या- <text>
तत्व पर काम करने के लिए width
के लिए कुछ जादू display:block
प्रकार की संपत्ति है I SVG में सेट करने की आवश्यकता है।
यह कैसे किया जाना चाहिए?
प्रतिक्रियाओं के आधार पर, मैं एक जावास्क्रिप्ट मार्ग के साथ चला गया और (ऊंचाई/2) उपरोक्त पंक्ति संशोधित होने के लिए ...
.attr('transform', 'translate(-' + yAxisSpacing + ',' + height/2 + ') rotate(-90)')
तो दूसरे शब्दों में मुझे जावास्क्रिप्ट के साथ लंबवत रूप से केंद्रित करने के लिए मैन्युअल रूप से ट्रांसफॉर्म x, y सेट करना होगा। मैं एक शुद्ध सीएसएस समाधान से दूर होने की उम्मीद कर रहा था जो पृष्ठ के आकार के साथ तरल पदार्थ हो सकता है। –