DC.js - D3.js का परिचय

D3.js एक जावास्क्रिप्ट लाइब्रेरी है जिसका उपयोग ब्राउज़र में इंटरैक्टिव विज़ुअलाइज़ेशन बनाने के लिए किया जाता है। डी 3 लाइब्रेरी हमें एक वेबपेज के तत्वों को एक डाटासेट के संदर्भ में हेरफेर करने की अनुमति देता है। ये तत्व HTML, एसवीजी या कैनवस तत्व हो सकते हैं, और डेटासेट की सामग्री के अनुसार इन्हें प्रस्तुत, हटाया या संपादित किया जा सकता है। यह डोम ऑब्जेक्ट्स में हेरफेर करने के लिए एक पुस्तकालय है। D3.js डेटा अन्वेषण में एक मूल्यवान सहायता हो सकती है। यह आपको अपने डेटा के प्रतिनिधित्व पर नियंत्रण देता है और आपको डेटा इंटरएक्टिविटी जोड़ने देता है।

अन्य पुस्तकालयों की तुलना में D3.js प्रमुख ढांचे में से एक है। यह है क्योंकि; यह वेब और डेटा विज़ुअलाइज़ेशन पर काम करता है और एंटरप्राइज़ ग्रेड का है। एक और कारण इसका शानदार लचीलापन है, जो दुनिया भर के डेवलपर्स को कई उन्नत चार्ट बनाने में सक्षम बनाता है। साथ ही, इसने अपनी कार्यक्षमता को काफी हद तक बढ़ाया है।

आइए हम D3.js की मूल अवधारणाओं को समझते हैं, जो इस प्रकार हैं -

• Selections
• डेटा जुड़ते हैं
• SVG
• Transition
• Animation
• डी 3.जेएस एपीआई

आइए हम इनमें से प्रत्येक अवधारणा को विस्तार से समझें।

चयन

चयन D3.js. में मुख्य अवधारणा में से एक है यह CSS चयनकर्ता अवधारणा पर आधारित है। जिन लोगों ने JQuery का उपयोग किया है और वे पहले से ही जानते हैं, वे आसानी से चयन को समझ सकते हैं। यह हमें CSS चयनकर्ताओं के आधार पर DOM का चयन करने में सक्षम बनाता है और फिर DOM के तत्वों को संशोधित करने या हटाने के लिए विकल्प प्रदान करता है।

डाटा जॉइन करें

डेटा जुड़ना D3.js. में एक और महत्वपूर्ण अवधारणा है यह चयन के साथ-साथ काम करता है और हमें हमारे डेटासेट (संख्यात्मक मानों की एक श्रृंखला) के संबंध में HTML दस्तावेज़ में हेरफेर करने में सक्षम बनाता है। डिफ़ॉल्ट रूप से, D3.js अपने तरीकों में डाटासेट को सर्वोच्च प्राथमिकता देता है और डाटासेट में प्रत्येक आइटम एक HTML तत्व से मेल खाता है।

एसवीजी

एसवीजी का मतलब है Scalable Vector Graphics। एसवीजी एक XML आधारित वेक्टर ग्राफिक्स प्रारूप है। यह लाइन्स, रेक्टैंगल्स, सर्कल्स, एलिप्स इत्यादि विभिन्न आकृतियों को आकर्षित करने के लिए विकल्प प्रदान करता है। इसलिए, एसवीजी के साथ विज़ुअलाइज़ेशन को डिजाइन करना आपको अधिक शक्ति और लचीलापन देता है।

परिवर्तन

एसवीजी एकल एसवीजी आकार तत्व या एसवीजी तत्वों के समूह को बदलने के लिए विकल्प प्रदान करता है। एसवीजी ट्रांसफॉर्म ट्रांसलेट, स्केल, रोटेट और स्क्यू का समर्थन करता है।

TRANSITION

संक्रमण एक राज्य से दूसरे आइटम में बदलने की प्रक्रिया है। D3.js HTML पृष्ठ में संक्रमण करने के लिए एक संक्रमण () विधि प्रदान करता है।

एनीमेशन

D3.js संक्रमण के माध्यम से एनीमेशन का समर्थन करता है। संक्रमण के उचित उपयोग के साथ एनीमेशन किया जा सकता है। परिवर्तन केवल दो प्रमुख फ़्रेमों के साथ कुंजी फ़्रेम एनीमेशन का सीमित रूप हैं:start तथा end। प्रारंभिक कुंजी फ़्रेम आमतौर पर DOM की वर्तमान स्थिति है, और अंतिम कुंजी फ़्रेम आपके द्वारा निर्दिष्ट विशेषताओं, शैलियों और अन्य गुणों का एक सेट है। संक्रमण एक जटिल कोड के बिना एक नए दृश्य में संक्रमण के लिए अच्छी तरह से अनुकूल हैं जो शुरुआती दृश्य पर निर्भर करता है।

डी 3.जेएस एपीआई

आइए हम कुछ महत्वपूर्ण D3.js एपीआई के तरीकों को संक्षेप में समझते हैं।

संग्रह एपीआई

एक संग्रह केवल एक वस्तु है जो कई तत्वों को एक इकाई में समूहित करता है। इसे एक कंटेनर के रूप में भी कहा जाता है। इसमें ऑब्जेक्ट्स, मैप्स, सेट्स और घोंसले शामिल हैं।

पथ एपीआई

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

एक्सिस एपीआई

D3.js कुल्हाड़ियों को खींचने के लिए कार्य प्रदान करता है। एक अक्ष लाइनों, टिक्स और लेबल से बना है। एक अक्ष पैमाने का उपयोग करता है, इस प्रकार प्रत्येक अक्ष को काम करने के लिए एक पैमाने देने की आवश्यकता होगी।

जूमिंग एपीआई

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

परिसीमन-पृथक मूल्य एपीआई

एक सीमांकक एक या एक से अधिक वर्णों का एक क्रम है जिसका उपयोग सादे पाठ या अन्य डेटा में अलग, स्वतंत्र क्षेत्रों के बीच सीमा को निर्दिष्ट करने के लिए किया जाता है। एक फ़ील्ड सीमांकक अल्पविराम द्वारा अलग किए गए मानों का एक क्रम है। संक्षेप में, सीमांकित-पृथक मान कोमा-सेपरेटेड वैल्यूज़ (CSV) या टैब-सेपरेटेड वैल्यूज़ (TSV) हैं।