SVG और Vue.js का उपयोग करके गतिशील वृक्ष आरेखों का विकास

सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, गतिशील वृक्ष आरेखों के लिए एक दृश्य प्रणाली विकसित करने की प्रक्रिया के लिए समर्पित है। क्यूबिक बेजियर कर्व्स खींचने के लिए, यहां एसवीजी तकनीक (स्केलेबल वेक्टर ग्राफिक्स, स्केलेबल वेक्टर ग्राफिक्स) का उपयोग किया जाता है। डेटा के साथ प्रतिक्रियात्मक कार्य Vue.js. द्वारा आयोजित किया जाता है।

यहां सिस्टम का एक डेमो संस्करण है जिसके साथ आप प्रयोग कर सकते हैं।


इंटरएक्टिव ट्री चार्ट

SVG और Vue.js ढांचे की शक्तिशाली क्षमताओं के संयोजन ने हमें आरेख बनाने के लिए एक प्रणाली बनाने की अनुमति दी जो डेटा-आधारित, इंटरैक्टिव और अनुकूलन योग्य हैं।

एक आरेख एक बिंदु पर शुरू होने वाले क्यूबिक बेजियर कर्व्स का एक संग्रह है। वक्र एक दूसरे से अलग-अलग बिंदुओं पर समाप्त होते हैं। उनकी अंतिम स्थिति उपयोगकर्ता द्वारा दर्ज किए गए डेटा पर निर्भर करती है। नतीजतन, चार्ट डेटा परिवर्तनों के प्रति प्रतिक्रियात्मक रूप से प्रतिक्रिया करने में सक्षम है।

पहले, हम इस बारे में बात करेंगे कि बेजियर क्यूबिक वक्र कैसे बनते हैं, फिर हम यह पता लगाएंगे कि <svg> तत्व के समन्वय प्रणाली में उनका प्रतिनिधित्व कैसे करें, और छवियों के लिए मास्क बनाने के बारे में बात करें।

सामग्री के लेखक का कहना है कि उसने उसके लिए कई चित्र तैयार किए, उसे समझने और दिलचस्प बनाने की कोशिश की। सामग्री का उद्देश्य सभी को अपने स्वयं के आरेख प्रणालियों को विकसित करने के लिए आवश्यक ज्ञान और कौशल प्राप्त करने में मदद करना है।

एसवीजी

Are घन बेजियर वक्र कैसे बनते हैं?

इस परियोजना में उपयोग किए जाने वाले वक्रों को क्यूबिक बेजियर कर्व कहा जाता है। निम्नलिखित आंकड़ा इन घटता के प्रमुख तत्वों को दर्शाता है।


बेज़ियर क्यूब कर्व के प्रमुख तत्व

वक्र को निर्देशांक के चार जोड़े द्वारा वर्णित किया गया है। पहली जोड़ी (x0, y0) वक्र का प्रारंभिक लंगर बिंदु है। निर्देशांक (x3, y3) की अंतिम जोड़ी अंतिम संदर्भ बिंदु है।

इन बिंदुओं के बीच, आप तथाकथित नियंत्रण बिंदु देख सकते हैं। यह बिंदु (x1, y1) और बिंदु (x2, y2) ।

नियंत्रण बिंदुओं के संबंध में नियंत्रण बिंदुओं का स्थान वक्र के आकार को निर्धारित करता है। यदि वक्र को केवल प्रारंभ और अंत बिंदुओं, निर्देशांक (x0, y0) और (x3, y3) द्वारा सेट किया गया था, तो यह वक्र तिरछे स्थित एक सीधे खंड की तरह दिखेगा।

अब हम उपरोक्त वर्णित चार बिंदुओं के निर्देशांक का उपयोग SVG <path> एलिमेंट का उपयोग करके वक्र को प्लॉट करने के लिए करेंगे। क्यूबिक बेजियर कर्व्स के निर्माण के लिए <path> तत्व में प्रयुक्त सिंटैक्स इस प्रकार है:

 <path D="M x0,y0 C x1,y1 x2,y2 x3,y3" /> 

अक्षर , जिसे कोड में देखा जा सकता है, क्यूबिक बेजियर कर्व के लिए एक संक्षिप्त नाम है। लोअर केस लेटर ( c ) का अर्थ है सापेक्ष मूल्यों का उपयोग, अपरकेस ( C ) का अर्थ पूर्ण मूल्यों का उपयोग है। मैं आरेख बनाने के लिए निरपेक्ष मूल्यों का उपयोग करता हूं, यह उदाहरण में उपयोग किए गए पूंजी पत्र द्वारा दर्शाया गया है।

▍ सममित आरेख बनाना

समरूपता इस परियोजना का एक प्रमुख पहलू है। एक सममित आरेख बनाने के लिए, मैंने केवल एक चर का उपयोग किया, इसके आधार पर ऐसे मान प्राप्त किए, जैसे किसी निश्चित वस्तु के केंद्र की ऊंचाई, चौड़ाई या निर्देशांक।

इस चर size का नाम दें। चूंकि चार्ट क्षैतिज रूप से उन्मुख है - size चर को पूरे क्षैतिज स्थान के रूप में माना जा सकता है जो चार्ट के लिए उपलब्ध है।

इस चर को एक यथार्थवादी मान प्रदान करें। हम चार्ट तत्वों के निर्देशांक की गणना करने के लिए इस मान का उपयोग करेंगे।

 size = 1000 

चार्ट तत्वों के निर्देशांक ढूँढना

इससे पहले कि हम आरेख बनाने के लिए आवश्यक निर्देशांक पा सकें, हमें एसवीजी समन्वय प्रणाली से निपटने की आवश्यकता है।

▍ऑर्डिनेट सिस्टम और व्यूबॉक्स

हमारी परियोजना में <svg> viewBox बहुत महत्वपूर्ण है। तथ्य यह है कि यह एसवीजी छवि के उपयोगकर्ता समन्वय प्रणाली का वर्णन करता है। सीधे शब्दों में कहें, viewBox उस स्थान की स्थिति और आकार को निर्धारित करता है जिसमें स्क्रीन पर दिखाई देने वाली एसवीजी छवि बनाई जाएगी।

viewBox विशेषता में चार नंबर होते हैं जो समन्वय प्रणाली के मापदंडों को निर्दिष्ट करते हैं और इस क्रम में निम्नलिखित हैं: min-x , min-y , width , height । min-x और min-y पैरामीटर उपयोगकर्ता समन्वय प्रणाली की उत्पत्ति निर्धारित करते हैं, width और height पैरामीटर प्रदर्शित छवि की चौड़ाई और ऊंचाई निर्धारित करते हैं। यहाँ viewBox विशेषता क्या दिख सकती है:

 <svg viewBox="min-x min-y width height">...</svg> 

ऊपर वर्णित size चर का उपयोग इस समन्वय प्रणाली की width और height मापदंडों को नियंत्रित करने के लिए किया जाएगा।

बाद में, Vue.js पर अनुभाग में, हम width और height मान निर्दिष्ट करने के लिए एक गणना की गई संपत्ति पर viewBox को viewBox । इसके अलावा, हमारी परियोजना में, गुण min-x और min-y हमेशा 0 पर सेट होंगे।

ध्यान दें कि हम <svg> तत्व की height और width विशेषताओं का उपयोग नहीं करते हैं। हम उन्हें width: 100% सेट करेंगे width: 100% और height: 100% सीएसएस का उपयोग करके height: 100% । यह हमें एसवीजी छवि बनाने की अनुमति देगा जो लचीले रूप से पृष्ठ आकार में समायोजित होती है।

अब चूंकि उपयोगकर्ता समन्वय प्रणाली एक चार्ट बनाने के लिए तैयार है, चलो चार्ट तत्वों के निर्देशांक की गणना करने के लिए size चर का उपयोग करने के बारे में बात करते हैं।

Ar अपरिवर्तनीय और गतिशील निर्देशांक

चार्ट अवधारणा

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

चार्ट की ऊंचाई दो भागों में विभाजित है। ये topHeight ( size का 20%) और topHeight (शेष 80% size ) हैं। आरेख की कुल चौड़ाई 2 भागों में विभाजित है - उनमें से प्रत्येक की लंबाई size का 50% है।

यह सर्कल के मापदंडों के निष्कर्षों को विशेष स्पष्टीकरण की आवश्यकता नहीं बनाता है (यहां halfSize और topHeight संकेतक का उपयोग किया जाता है)। radius पैरामीटर topHeight आधे मान पर topHeight । इसके लिए धन्यवाद, सर्कल पूरी तरह से उपलब्ध स्थान में फिट बैठता है।

अब आइए घटता के निर्देशांक पर एक नज़र डालें।

• निर्देशांक (x0, y0) वक्र के शुरुआती संदर्भ बिंदु को परिभाषित करते हैं। ये निर्देशांक हर समय स्थिर रहते हैं। x0 निर्देशांक चार्ट का केंद्र (आधा size ) है, और y0 वह समन्वय है जिस पर वृत्त का निचला भाग समाप्त होता है। इसलिए, इस समन्वय की गणना करने के सूत्र में, वृत्त की त्रिज्या का उपयोग किया जाता है। नतीजतन, इस सूत्र के निर्देशांक निम्न सूत्र से मिल सकते हैं : (50% size, 20% size + radius) ।
• निर्देशांक (x1, y1) वक्र का पहला नियंत्रण बिंदु है। यह सभी घटता के लिए अपरिवर्तित भी रहता है। यदि हम यह नहीं भूलते हैं कि वक्र सममित होना चाहिए, तो यह पता चला है कि x1 और y1 के मान हमेशा size आधे मूल्य के बराबर size । इसलिए उनकी गणना का सूत्र: (50% size, 50% size) ।
• निर्देशांक (x2, y2) बेज़ियर वक्र के दूसरे नियंत्रण बिंदु का प्रतिनिधित्व करते हैं। यहाँ x2 इंगित करता है कि वक्र किस आकार का होना चाहिए। इस सूचक की गणना प्रत्येक वक्र के लिए गतिशील रूप से की जाती है। और सूचक y2 , पहले की तरह, size आधा होगा। इसलिए इन निर्देशांक की गणना के लिए निम्न सूत्र: (x2, 50% size) ।
• निर्देशांक (x3, y3) वक्र के अंत संदर्भ बिंदु हैं। यह समन्वय इंगित करता है कि आप रेखा खींचना कहां समाप्त करना चाहते हैं। यहां, x3 तरह x3 के मूल्य की गणना गतिशील रूप से की जाती है। और y3 size 80% के बराबर मूल्य लेता है। नतीजतन, हम निम्नलिखित सूत्र प्राप्त करते हैं: (x3, 80% size) ।

हम फिर से लिखते हैं, सामान्य शब्दों में, <path> तत्व के लिए कोड, उन सूत्रों को ध्यान में रखते हुए जिन्हें हमने अभी प्राप्त किया है। ऊपर उपयोग किए गए प्रतिशत यहां 100 से विभाजित करके प्रस्तुत किए गए हैं।

 <path d="M size*0.5, (size*0.2) + radius          C size*0.5, size*0.5           x2,    size*0.5           x3,    size*0.8" > 

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

अब बात करते हैं कि हम निर्देशांक x2 और x3 लिए कैसे दिखेंगे। वे आपको संबंधित सरणी में तत्वों के index आधार पर गतिशील रूप से कई वक्र बनाने की अनुमति देते हैं।

चार्ट के उपलब्ध क्षैतिज स्थान को समान भागों में विभाजित करना सरणी में तत्वों की संख्या पर आधारित है। नतीजतन, प्रत्येक भाग एक्स अक्ष के साथ एक ही स्थान प्राप्त करता है।

सूत्र जो हम प्राप्त करते हैं, बाद में किसी भी संख्या में तत्वों के साथ काम करना चाहिए। लेकिन यहां हम 5 तत्वों वाले एक सरणी के साथ प्रयोग करेंगे: [0,1,2,3,4] । इस तरह के एक सरणी के विज़ुअलाइज़ेशन का मतलब है कि 5 घटता खींचना आवश्यक है

गतिशील निर्देशांक (x2 और x3) का निर्माण करना

सबसे पहले, मैंने size को तत्वों की संख्या से विभाजित किया है, अर्थात्, सरणी की लंबाई से। मैंने इसे चर distance कहा। यह दो तत्वों के बीच की दूरी का प्रतिनिधित्व करता है।

 distance = size/arrayLength // distance = 1000/5 = 200 

फिर मैं सरणी के चारों ओर चला गया और उसके प्रत्येक तत्व ( index ) के index को distance गुणा किया। सादगी के लिए, मैं बस x x2 को x2 पैरामीटर और x3 पैरामीटर कहता हूं।

 //  x2  x3 x = index * distance 

यदि आप आरेख बनाते समय प्राप्त मूल्यों को लागू करते हैं, अर्थात, x2 और x3 दोनों के लिए ऊपर गणना की गई x मान का उपयोग करें, तो यह थोड़ा अजीब लगेगा।


आरेख विषम है

जैसा कि आप देख सकते हैं, तत्व उस क्षेत्र में स्थित हैं जहां उन्हें होना चाहिए, लेकिन आरेख विषम हो गया। ऐसा लगता है कि इसके बाएं हिस्से में दाएं से अधिक तत्व हैं।

अब मुझे संबंधित खंडों के केंद्र में x3 मान झूठ बनाने की आवश्यकता है, जिसकी लंबाई distance चर का उपयोग करके सेट distance है।

आरेख को मेरी आवश्यकता के रूप में लाने के लिए, मैंने बस x आधा मान distance जोड़ा।

 x = index * distance + (distance * 0.5) 

नतीजतन, मैंने distance सेगमेंट का केंद्र पाया और x3 को इसमें समन्वयित किया। इसके अलावा, मुझे उस फॉर्म में लाया गया जिसे हमें कर्व नंबर 2 के लिए x2 समन्वय की आवश्यकता है।


सममित आरेख

x2 और x3 निर्देशांक में आधी distance मान जोड़कर इन निर्देशांक के लिए गणना सूत्र बनाया गया है जो समान और विषम तत्वों की संख्या को दर्शाने वाले सरणियों के लिए उपयुक्त है।

▍ छवि मास्किंग

हमें एक निश्चित छवि की आवश्यकता होती है, जो चक्र के भीतर, आरेख के शीर्ष पर दिखाई दे। इस समस्या को हल करने के लिए, मैंने एक सर्कल वाला एक क्लिपिंग मास्क बनाया।

 <defs>  <mask id="svg-mask">     <circle :r="radius"             :cx="halfSize"             :cy="topHeight"             fill="white"/>  </mask> </defs> 

फिर, <image> को प्रदर्शित करने के लिए <image> <svg> <image> तत्व के <image> टैग का उपयोग करके, मैंने छवि को <mask> तत्व से जोड़ा है जो <image> तत्व के mask विशेषता का उपयोग करके ऊपर बनाया गया है।

 <image mask="url(#svg-mask)"      :x="(halfSize-radius)"      :y="(topHeight-radius)" ... > </image> 

चूँकि हम एक वर्गाकार चित्र को "विंडो" के रूप में फिट करने का प्रयास कर रहे हैं, इसलिए मैंने इसी पैरामीटर से radius पैरामीटर को घटाकर तत्व की स्थिति को समायोजित किया। नतीजतन, छवि एक सर्कल के रूप में बने मुखौटा के माध्यम से दिखाई देती है।

आइए एक ड्राइंग में हम सभी के बारे में बात करते हैं। इससे हमें काम की प्रगति की समग्र तस्वीर देखने में मदद मिलेगी।


चार्ट मापदंडों की गणना में उपयोग किया जाने वाला डेटा

Vue.js का उपयोग करके एक गतिशील एसवीजी छवि बनाना

इस बिंदु पर, हमने क्यूबिक बेजियर घटता का पता लगाया और आरेख बनाने के लिए आवश्यक गणना की। परिणामस्वरूप, अब हम स्थैतिक एसवीजी आरेख बना सकते हैं। यदि हम SVG और Vue.js की क्षमताओं को मिलाते हैं, तो हम डेटा द्वारा संचालित आरेख बना सकते हैं। स्टेटिक चार्ट गतिशील हो जाएंगे।

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

इसके अलावा, परियोजना के अंत में, हम एक घटक बनाएंगे जो एक कॉन्फ़िगरेशन पैनल है। इस घटक का उपयोग उन डेटा को दर्ज करने के लिए किया जाएगा जो चार्ट पर प्रसारित होंगे।

▍ डेटा को देखने के मापदंडों के लिए बाइंडिंग

आइए समन्वय प्रणाली को समायोजित करके शुरू करें। ऐसा किए बिना, हम एसवीजी चित्र नहीं बना पाएंगे। गणना की गई viewbox प्रॉपर्टी वह होगी जो हमें size वैरिएबल का उपयोग करके चाहिए। रिक्त स्थान द्वारा अलग किए गए चार मान होंगे। यह सब <svg> तत्व के viewBox विशेषता का मान बन जाएगा।

 viewbox() {   return "0 0 " + this.size + " " + this.size; } 

एसवीजी में, viewBox विशेषता viewBox नाम पहले viewBox ही ऊंट शैली का उपयोग करके लिखा गया है।

 <svg viewBox="0 0 1000 1000"> </svg> 

इसलिए, गणना की गई संपत्ति में इस विशेषता को सही ढंग से बाँधने के लिए, मैंने कबाब शैली में विशेषता नाम को लिखा और उसके बाद .camel संशोधक डाला। इस दृष्टिकोण के साथ, HTML को "ट्रिक" करना और विशेषता बाइंडिंग को सही तरीके से लागू करना संभव है।

 <svg :view-box.camel="viewbox">   ... </svg> 

अब size बदलते समय size चार्ट को स्वतंत्र रूप से पुन: कॉन्फ़िगर किया जाता है। हमें लेआउट को मैन्युअल रूप से बदलने की आवश्यकता नहीं है।

वक्र मापदंडों का al टीकाकरण

चूँकि वक्रों के निर्माण के लिए आवश्यक अधिकांश मानों की गणना एक एकल चर ( size ) के आधार पर की जाती है, मैं गणना किए गए गुणों द्वारा सभी निश्चित निर्देशांक खोजने के लिए उपयोग करता था। जिसे हम यहां "निश्चित निर्देशांक" कहते हैं, उसकी गणना size के आधार पर की जाती है, और उसके बाद यह नहीं बदलता है और यह इस बात पर निर्भर नहीं करता है कि आरेख में कितने वक्र शामिल होंगे।

यदि आप size बदलते हैं - "निश्चित निर्देशांक" को फिर से जोड़ा जाएगा। उसके बाद, वे तब तक नहीं बदलेंगे जब तक कि अगले size परिवर्तन न हो। उपरोक्त को देखते हुए, यहाँ पाँच मूल्य दिए गए हैं जिन्हें हमें बेज़ियर कर्व्स बनाने की आवश्यकता है:

• topHeight — size * 0.2
• bottomHeight — size * 0.8
• width — size
• halfSize — size * 0.5
• distance — size/arrayLength

अब हमारे पास केवल दो अज्ञात मान बचे हैं - x2 और x3 । उनकी गणना करने का सूत्र हम पहले ही प्राप्त कर चुके हैं:

 x = index * distance + (distance * 0.5) 

विशिष्ट मूल्यों को खोजने के लिए, हमें इस सूत्र में सरणी तत्वों के सूचकांकों को प्रतिस्थापित करना होगा।

अब आइए अपने आप से पूछें कि क्या x लिए गणना की गई संपत्ति हमारे लिए सही है। इस प्रश्न का संक्षिप्त उत्तर दें, तब - नहीं, यह नहीं चलेगा।

गणना की गई संपत्ति को पैरामीटर पारित नहीं किया जा सकता है। तथ्य यह है कि यह एक संपत्ति है, एक फ़ंक्शन नहीं है। इसके अलावा, कुछ की गणना करने के लिए एक पैरामीटर का उपयोग करने की आवश्यकता का मतलब है कि कैशिंग के संदर्भ में गणना की गई संपत्तियों का उपयोग करने का कोई ठोस लाभ नहीं है।

कृपया ध्यान दें कि उपरोक्त सिद्धांत के संबंध में एक अपवाद है। यह Vuex के बारे में है। यदि आप Vuex प्राप्तकर्ताओं का उपयोग करते हैं जो फ़ंक्शन वापस करते हैं, तो आप उन्हें पैरामीटर पास कर सकते हैं।

इस मामले में, हम Vuex का उपयोग नहीं करते हैं। लेकिन इस स्थिति में भी, हमारे पास इस समस्या को हल करने के कुछ तरीके हैं।

1 विकल्प संख्या 1

आप एक फ़ंक्शन की घोषणा कर सकते हैं कि किस index को एक तर्क के रूप index पारित किया जाता है, और जो हमें आवश्यक परिणाम देता है। यदि हम टेम्प्लेट में कई स्थानों पर समान फ़ंक्शन द्वारा दिए गए मान का उपयोग करने जा रहे हैं, तो यह दृष्टिकोण क्लीनर दिखता है।

 <g v-for="(item, i) in itemArray">  <path :d="'M' + halfSize + ','     + (topHeight+r) +' '+            'C' + halfSize + ','     + halfSize +' '+                     calculateXPos(i) + ',' + halfSize +' '+                  calculateXPos(i) + ',' + bottomHeight"  /> </g> 

प्रत्येक बार कहा जाने वाला calculateXPos() विधि गणना करेगा। यह विधि तत्व के सूचकांक को तर्क के रूप में लेती है - i ।

 <script>  methods: {    calculateXPos (i)    {      return distance * i + (distance * 0.5)    }  } </script> 

यहाँ CodePen पर एक उदाहरण है जो इस समाधान का उपयोग करता है।


पहले आवेदन संस्करण के लिए स्क्रीन

2 विकल्प संख्या 2

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

इस दृष्टिकोण के साथ, आप x2 और x3 को खोजने के लिए गणना की गई संपत्ति का उपयोग भी कर सकते हैं।

 <g v-for="(item, i) in items">    <cubic-bezier :index="i"                   :half-size="halfSize"                   :top-height="topHeight"                   :bottom-height="bottomHeight"                   :r="radius"                   :d="distance"     >     </cubic-bezier> </g> 

यह विकल्प हमें कोड को बेहतर ढंग से व्यवस्थित करने का अवसर देता है। उदाहरण के लिए, हम मास्क के लिए एक और बच्चा घटक बना सकते हैं:

 <clip-mask :title="title"           :half-size="halfSize"           :top-height="topHeight"                               :r="radius"> </clip-mask> 

OnConfiguration पैनल

कॉन्फ़िगरेशन पैनल

आप शायद पहले से ही कॉन्फ़िगरेशन पैनल देख चुके हैं, जिसे उपरोक्त उदाहरण के स्क्रीन के ऊपरी बाएं कोने में स्थित बटन द्वारा बुलाया गया है। यह पैनल तत्वों को सरणी में जोड़ना और उन्हें इससे निकालना आसान बनाता है। "विकल्प # 2" अनुभाग में चर्चा किए गए विचारों के बाद, मैंने कॉन्फ़िगरेशन पैनल के लिए एक बाल घटक बनाया। इसके लिए धन्यवाद, शीर्ष-स्तरीय घटक साफ और अच्छी तरह से पठनीय है। नतीजतन, Vue घटकों का हमारा छोटा सा अच्छा पेड़ कुछ नीचे जैसा दिखता है।


परियोजना घटक वृक्ष

उस कोड पर एक नज़र डालना चाहते हैं जो परियोजना के इस संस्करण को लागू करता है? यदि हां, तो यहां देख लें।


दूसरे एप्लिकेशन संस्करण के लिए स्क्रीन

प्रोजेक्ट रिपॉजिटरी

यहाँ परियोजना GitHub रिपॉजिटरी है ("विकल्प # 2" यहां लागू किया गया है)। मेरा मानना ​​है कि अगले खंड पर जाने से पहले आपके लिए इसे देखना उपयोगी होगा।

घर का पाठ

उसी आरेख को बनाने का प्रयास करें जिसे हमने यहां वर्णित किया है, लेकिन इसे लंबवत रूप से उन्मुख करें। इस लेख में उल्लिखित विचारों का लाभ उठाएं।

अगर आपको लगता है कि यह एक आसान काम है, तो इस तरह के आरेख का निर्माण करने के लिए यह x और y निर्देशांक को स्वैप करने के लिए पर्याप्त है, तो आप सही हैं। यह देखते हुए कि यहां पर विचार किए गए प्रोजेक्ट को सार्वभौमिक नहीं बनाया गया था, निर्देशांक बदलने के बाद जहां आपको इसकी आवश्यकता है, आपको कुछ चर और विधियों का नाम बदलकर कोड को संपादित करने की भी आवश्यकता होगी।

Vue.js के लिए धन्यवाद, हमारा सरल चार्ट अतिरिक्त सुविधाओं से सुसज्जित हो सकता है। उदाहरण के लिए, निम्नलिखित:

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

इस होमवर्क की कोशिश करो। और अगर आपको कोई समस्या है - तो इसके समाधान के लिए नीचे एक लिंक दिया जाएगा।

परिणाम

<path> तत्व एसवीजी की शक्तिशाली विशेषताओं में से एक है। यह तत्व आपको उच्च सटीकता के साथ विभिन्न छवियां बनाने की अनुमति देता है। यहाँ हमने यह पता लगाया कि बेजियर कर्व्स को कैसे संरचित किया जाता है, और अपने आरेख बनाने के लिए उन्हें कैसे अभ्यास में लाया जाए।

, , JavaScript-. Vue.js . , , , , DOM. , — .

, , , , , Vue.js SVG. — , Vue.js. — .

, - , , , — .

प्रिय पाठकों! ?