2012-08-27 21 views
6

में 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)') 

उत्तर

5

एक width विशेषता < पाठ पर कोई प्रभाव नहीं> एसवीजी 1.1 में है। पाठ को x और y विशेषताओं द्वारा परिभाषित एक्स, वाई स्थिति के चारों ओर केंद्रित किया जाएगा (पाठ-एंकर = मध्य के कारण) (यदि आप उन्हें निर्दिष्ट नहीं करते हैं तो वे 0 से डिफ़ॉल्ट होते हैं)। उसके बाद transform विशेषता लागू होती है।

+0

तो दूसरे शब्दों में मुझे जावास्क्रिप्ट के साथ लंबवत रूप से केंद्रित करने के लिए मैन्युअल रूप से ट्रांसफॉर्म x, y सेट करना होगा। मैं एक शुद्ध सीएसएस समाधान से दूर होने की उम्मीद कर रहा था जो पृष्ठ के आकार के साथ तरल पदार्थ हो सकता है। –

1

आप सीएसएस के साथ ऐसा कर सकता है बदलना। यहाँ

-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
     transform: rotate(90deg); 
      filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
       M11=6.123031769111886e-17, M12=-1, M21=1, M22=6.123031769111886e-17, sizingMethod='auto expand'); 
      zoom: 1; 

कार्य उदाहरण - 'सीएसएस' टैब में देखो: (http://css3please.com के माध्यम से) अपने सीएसएस करने के लिए इस जोड़े http://livecoding.io/3492918

+0

उदाहरण पर वाई-अक्ष लेबल घुमाया गया है लेकिन लंबवत केंद्रित नहीं है, जो हिस्सा मैं बाद में था। –