d3.js अजीब रोटेशन व्यवहार

Question

मैं एक जेएस प्रोजेक्ट के शुरुआती चरणों में हूं। एक आकार की स्थिति को छोड़कर अब तक सब ठीक हो रहा है। प्रश्न में आकार एक टील हीरा (वर्ग 45 डिग्री घूर्णन) है। मैं स्क्रीन पर वर्ग कोई समस्या नहीं मिल सकता है, लेकिन जब मैं जोड़ें:

.attr("transform", "rotate(45)") 

वर्ग ठीक से घूमता है, लेकिन, स्क्रीन के बाएं हिस्से की ओर बदलाव इस तरह:

मुझे यकीन नहीं है कि ऐसा होने का क्या कारण है।

var svg = d3.select("body") 
      .append("svg") 
      .attr("width", w) 
      .attr("height", h); 
     svg 
      .append("rect") 
      .attr("transform", "rotate(45)") 
      .attr("x", 250) 
      .attr("height", w/10) 
      .attr("width", w/10) 
      .attr("fill", "teal") 

नोट:: यदि यह मदद करता है, यहाँ कोड है कि इस परिणाम का उत्पादन में से कुछ है, तो मैं "y" में विशेषता शब्दों में कहें, वर्ग पूरी तरह से गायब हो जाता है।

इसका कारण क्या है? क्या मैंने कुछ गलत किया है जिसे मैं नहीं देख सकता?

Answer 1

जब आप रेक्ट घुमाते हैं, तो आप इसकी समन्वय प्रणाली को भी घुमाते हैं। तो जब आप बाद में इसे एक्स अक्ष के साथ 250 स्थानांतरित करते हैं, तो आप वास्तव में 45 डिग्री अक्ष के साथ 250 इकाइयों को स्थानांतरित कर रहे हैं - घूर्णन के परिणाम।

एक नियम के रूप में, जब आप rotate के लिए transform विशेषता प्रस्तुत करते हैं, तो आपको इस विशेषता के माध्यम से अपना सभी परिवर्तन करना चाहिए। तो, आपको "x" विशेषता का उपयोग करने के बजाय translate का उपयोग करने की आवश्यकता है। फिर यह इस तरह दिखेगा:

svg 
    .append("rect") 
    .attr("transform", "translate(250, 0) rotate(45)") 
    // remove this: .attr("x", 250) 
    .attr("height", w/10) 
    ... 

यह आपको परिणाम लगता है जो आप सोच रहे हैं। अब ध्यान दें कि परिवर्तनों का क्रम यहां मायने रखता है: यदि आपका रूपांतरण "rotate(45) translate(250, 0)" था (यानी पहले घुमाएं तो अनुवाद करें), आपको वही मिलेंगे, जो आपको पहले मिले थे। ऐसा इसलिए है क्योंकि जब आप पहले घूमते हैं, तो आपका अनुवाद एक घूर्णन एक्स अक्ष के साथ पहले जैसा होता है।

Answer 2

एसवीजी में आप यह इस तरह के रूप सेंटर, से बारी बारी से करने के लिए मूल परिणत सेट करना होगा ...

.attr("transform", "rotate(45, 250, 100)"); 

कहाँ 250, 100 एक्स और अपने रेक्ट के y स्थिति है शून्य से यह त्रिज्या है। एक साथ यह कैसा दिखेगा यह सब लाना ...

var svg = d3.select("body") 
      .append("svg") 
      .attr("width", 400) 
      .attr("height", 300); 
     svg 
      .append("rect") 
      .attr("transform", "rotate(30,"+ (diamond.x+diamond.width/2) + ","+ (diamond.y+diamond.width/2) +")") 
      .attr("x", diamond.x) 
      .attr("y", diamond.y) 
      .attr("height", diamond.width) 
      .attr("width", diamond.width) 
      .attr("fill", "teal")​ 

आप यहाँ एक डेमो देख सकते:

http://jsfiddle.net/uwM8u/

Answer 3

यहाँ एक दृष्टिकोण जवाब Duopixel दिया से थोड़ा अलग है। यहां आप एक्स और वाई के लिए गणना दोहरा रहे नहीं हैं। डुओपिक्सेल के उदाहरण में, यह एक मामूली सुधार है क्योंकि वह केवल संरचना का संदर्भ दे रहा है। अक्सर यह मामला है कि एक्स और वाई कार्य कर रहे हैं और मैं दो स्थानों पर लॉगिंग को बनाए रखना नहीं चाहता हूं। यह दृष्टिकोण आपको एक्स और वाई को नोड सेट करने की अनुमति देता है, फिर कहा नोड के केंद्र पर घुमाएं।

आप पाते हैं कि घूर्णन के बाद, आप अभी भी अंतिम स्थिति को ट्विक करना चाहते हैं, जो किसी अन्य ट्रांसफॉर्म के साथ किया जा सकता है, या टेक्स्ट के मामले में, आप डीएक्स, डीई का उपयोग कर सकते हैं।

svgNode.attr("transform", function (d) { 

        var w = +d3.select(this).attr("x") + (this.getBBox().width/2) ; 
        var h = +d3.select(this).attr("y") + (this.getBBox().height/2); 

        return "rotate(90," + w + "," + h + ")"; 

       })