2012-06-05 16 views
32

अनुवाद करने के लिए मैंने यह समझने की कोशिश की कि डी 3 में ट्रांसफॉर्म कैसे काम कर रहा है लेकिन मुझे लगता है कि मुझे यह नहीं मिला।डी 3 ट्रांसफॉर्म स्केल और

क्या स्केल एसवीजी ऑब्जेक्ट के आकार को बदलता है? जिसका अर्थ है कि यदि मैं बड़ी संख्या देता हूं तो ऑब्जेक्ट का आकार बड़ा दिखाई देगा? क्या अनुवाद वस्तु को एक स्थान से अलग स्थान पर ले जाता है? मैंने कोशिश की लेकिन यह काम नहीं किया जैसा मैंने सोचा था।

क्या आप कृपया मुझे बता सकते हैं कि इसे कैसे काम करना चाहिए?

उत्तर

17

परिवर्तन एसवीजी ट्रांसफॉर्म हैं (विवरण के लिए, standard पर एक नज़र डालें)। असल में, स्केल और अनुवाद समन्वय प्रणाली में संबंधित परिवर्तन लागू करते हैं, जो ज्यादातर मामलों में अपेक्षित कार्य करना चाहिए। हालांकि आप एक से अधिक ट्रांसफॉर्म लागू कर सकते हैं (उदाहरण के लिए पहले स्केल और फिर अनुवाद करें) और फिर नतीजा यह नहीं हो सकता कि आप क्या उम्मीद करते हैं।

परिवर्तनों के साथ काम करते समय, ध्यान रखें कि वे समन्वय प्रणाली को बदलते हैं। सिद्धांत रूप में, आप जो कहते हैं वह सत्य है - यदि आप किसी ऑब्जेक्ट पर स्केल> 1 लागू करते हैं, तो यह बड़ा दिखाई देगा और अनुवाद अन्य ऑब्जेक्ट्स के सापेक्ष एक अलग स्थिति में ले जाएगा।

7

मुझे पता है इस सवाल का काफी पुराना है, लेकिन समूह के एक त्वरित प्रदर्शन साझा करना चाहते थे बदल देती है, पथ/आकार, और रिश्तेदार स्थिति, किसी और को जो यहाँ उनके रास्ता मिल गया अधिक जानकारी के लिए तलाश के लिए:

http://bl.ocks.org/dustinlarimer/6050773

+1

जब मैं इसे देख रहा हूं तो कट ऑफ लगता है, लेकिन – user4815162342

+0

साझा करने के लिए धन्यवाद यह उदाहरण केवल आईई में काम करता है; एफएफ और क्रोम में टूटा हुआ। – Upperstage

+0

क्या आप दो उस पर कुछ और साझा कर सकते हैं? ऐसा लगता है कि मेरे लिए ठीक काम कर रहा है। – larimer

24

स्कॉट मरे has a great explanation। उदाहरण के लिए, कोड स्निपेट के लिए:

svg.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(" + x + "," + y + ")") 
    .call(xAxis); 

वह का उपयोग कर बताता है:

ध्यान दें कि हम attr() का उपयोग ग्राम की एक विशेषता के रूप में परिणत लागू करने के लिए। एसवीजी ट्रांसफॉर्म काफी शक्तिशाली हैं, और स्केल और रोटेशन सहित परिभाषा परिभाषाओं के कई अलग-अलग प्रकार स्वीकार कर सकते हैं। लेकिन हम हैं जो इसे केवल अनुवाद अनुवाद के साथ सरल रखते हैं, जो कि कुछ जी द्वारा पूरे जी समूह को ऊपर और नीचे धक्का देता है।

अनुवाद रूपांतरण की आसान वाक्य रचना के साथ निर्दिष्ट कर रहे हैं का अनुवाद (एक्स, वाई), जहां x और y कर रहे हैं, जाहिर है, क्षैतिज और ऊर्ध्वाधर पिक्सल है जिसके द्वारा तत्व का अनुवाद करने की संख्या।

+1

क्या आप 'शैली' विशेषता का उपयोग करके 'ट्रांसफॉर्म' सेट करने का उदाहरण कोड प्रदान कर सकते हैं? 10x – vsync

संबंधित मुद्दे