जावास्क्रिप्ट में ग्राफ़ विज़ुअलाइज़ेशन लाइब्रेरी

Question

मेरे पास एक डेटा संरचना है जो एक निर्देशित ग्राफ का प्रतिनिधित्व करती है, और मैं उस गतिशील रूप से एक HTML पृष्ठ पर प्रस्तुत करना चाहता हूं। ये ग्राफ़ आमतौर पर सिर्फ कुछ नोड्स होंगे, शायद ऊपरी छोर पर दस, इसलिए मेरा अनुमान है कि प्रदर्शन बहुत बड़ी बात नहीं है। आदर्श रूप से, मैं इसे jQuery के साथ हुक करने में सक्षम होना चाहता हूं ताकि उपयोगकर्ता लेआउट को मैन्युअल रूप से नोड्स के चारों ओर खींचकर घुमा सकें।

नोट: मैं एक चार्टिंग लाइब्रेरी की तलाश में नहीं हूं।

Comments

इस प्रश्न को देखें: stackoverflow.com/questions/8308516/multigraphs-with-javascript

— linker

Answer 1

मैंने सिर्फ एक साथ रखा है जो आप देख रहे होंगे: http://www.graphdracula.net

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

var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");

मैंने पहले उल्लेख किए गए राफेल जेएस लाइब्रेरी (भित्तिचित्र उदाहरण) का उपयोग किया, साथ ही बल पर आधारित बल लेआउट ग्राफ एल्गोरिथ्म के लिए कुछ कोड जो मैंने नेट पर पाया (सब कुछ खुला स्रोत, एमआईटी लाइसेंस)। यदि आपके पास कोई टिप्पणी है या एक निश्चित सुविधा की आवश्यकता है, तो मैं इसे लागू कर सकता हूं, बस पूछें!

---

तुम भी अन्य परियोजनाओं पर एक नज़र रखना चाहते हो सकता है! नीचे दो मेटा-तुलनाएं दी गई हैं:

• SocialCompare में पुस्तकालयों की एक विस्तृत सूची है, और ग्राफ़ दृश्य के लिए "नोड / एज ग्राफ़" लाइन फ़िल्टर होगी।

• DataVisualization.ch ने नोड / ग्राफ वाले सहित कई पुस्तकालयों का मूल्यांकन किया है। दुर्भाग्य से कोई सीधा लिंक नहीं है इसलिए आपको "ग्राफ़" के लिए फ़िल्टर करना होगा:

यहां ऐसी ही परियोजनाओं की सूची दी गई है (कुछ पहले ही यहां बताई जा चुकी हैं):

शुद्ध जावास्क्रिप्ट पुस्तकालय

• vis.js कई प्रकार के नेटवर्क / एज ग्राफ़, प्लस टाइमलाइन और 2D / 3D चार्ट का समर्थन करता है। ऑटो-लेआउट, ऑटो-क्लस्टरिंग, स्प्रिंगली फिजिक्स इंजन, मोबाइल-फ्रेंडली, कीबोर्ड नेविगेशन, पदानुक्रमित लेआउट, एनीमेशन आदि। एमआईटी लाइसेंस प्राप्त और स्व-आयोजन नेटवर्क पर अनुसंधान में विशेषज्ञता वाली डच फर्म द्वारा विकसित।

• Cytoscape.js - jQuery सम्मेलनों के बाद इंटरैक्टिव ग्राफ विश्लेषण और मोबाइल समर्थन के साथ दृश्य। कई विश्वविद्यालयों और अन्य संगठनों की मदद से NIH अनुदान के माध्यम से और @maxkfranz ( नीचे अपना उत्तर देखें ) द्वारा विकसित ।

• जावास्क्रिप्ट इन्फोवीस टूलकिट - जीट , एक इंटरैक्टिव, बहुउद्देश्यीय ग्राफ ड्राइंग और लेआउट फ्रेमवर्क। उदाहरण के लिए हाइपरबोलिक ट्री देखें । ट्विटर डेटाविज आर्किटेक्ट निकोलस गार्सिया बेलमॉंट द्वारा निर्मित और 2010 में सेन्चा द्वारा खरीदा गया ।

• D3.js शक्तिशाली बहुउद्देश्यीय जेएस विज़ुअलाइज़ेशन लाइब्रेरी, प्रोटॉविस के उत्तराधिकारी। देखें बल निर्देशित ग्राफ उदाहरण और, में अन्य ग्राफ उदाहरण गैलरी ।

• प्लोटली की JS विज़ुअलाइज़ेशन लाइब्रेरी में JS., Python, R और MATLAB बाइंडिंग के साथ D3.js का उपयोग किया गया है। IPython में एक nexworkx उदाहरण देखें यहाँ , मानव बातचीत उदाहरण यहां , और जे एस एम्बेड एपीआई ।

• sigma.js रेखांकन रेखांकन के लिए लाइटवेट लेकिन शक्तिशाली पुस्तकालय

• इंटरैक्टिव कनेक्टेड ग्राफ़ बनाने के लिए jsPlumb jQuery प्लग-इन

• स्प्रिंगली - एक बल-निर्देशित ग्राफ लेआउट एल्गोरिदम

• Processing.js जॉन Resig द्वारा प्रसंस्करण पुस्तकालय का जावास्क्रिप्ट बंदरगाह

• जेएस ग्राफ इट - स्ट्रेट लाइन द्वारा जुड़े ड्रैगनेनड्रॉप बॉक्स। लाइनों का न्यूनतम ऑटो-लेआउट।

• राफेलजेएस का ग्रैफ़ल - एक सामान्य बहुउद्देश्यीय वेक्टर ड्राइंग लाइब्रेरी का इंटरैक्टिव ग्राफ उदाहरण है। राफेलजेएस नोड्स को स्वचालित रूप से लेआउट नहीं कर सकता है; इसके लिए आपको एक और पुस्तकालय की आवश्यकता होगी।

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

• mxGraph पहले व्यावसायिक रूप से HTML 5 डायग्रामिंग लाइब्रेरी, अब Apache v2.0 के तहत उपलब्ध है। mxGraph एक आधार पुस्तकालय है जिसका उपयोग draw.io में किया जाता है ।

वाणिज्यिक पुस्तकालय

• GoJS इंटरएक्टिव ग्राफ ड्राइंग और लेआउट लाइब्रेरी

• HTML वाणिज्यिक ग्राफ़ ड्राइंग और लेआउट लाइब्रेरी के लिए yFiles

• KeyLines वाणिज्यिक JS नेटवर्क विज़ुअलाइज़ेशन टूलकिट

• ZoomCharts वाणिज्यिक बहुउद्देश्यीय दृश्य पुस्तकालय

• ड्राइंग और विज़ुअलाइज़ेशन के लिए सिंकफ़्यूज़न जावास्क्रिप्ट डायग्राम वाणिज्यिक आरेख लाइब्रेरी।

पुस्तकालयों का त्याग कर दिया

• Cytoscape वेब एंबेडेबल जेएस नेटवर्क दर्शक (कोई नई सुविधाओं की योजना नहीं है; Cytoscape.js द्वारा सफल)

• ग्रेविज़ ग्राफ़ के लिए कैनविज़ जेएस रेंडरर । सितंबर 2013 में छोड़ दिया गया।

• arbor.js अच्छा भौतिकी और आंख कैंडी के साथ परिष्कृत रेखांकन। मई 2012 में छोड़ दिया गया। कई अर्ध-रखरखाव वाले कांटे मौजूद हैं।

• jssvggraph "SVG ऑब्जेक्ट्स का उपयोग करने वाली जावास्क्रिप्ट लाइब्रेरी के रूप में कार्यान्वित सबसे सरल संभव बल निर्देशित ग्राफ लेआउट एल्गोरिथ्म"। 2012 में छोड़ दिया गया।

• jsdot क्लाइंट साइड ग्राफ ड्राइंग एप्लीकेशन। 2011 में छोड़ दिया गया ।

• विज़ुअलाइज़ेशन (जावास्क्रिप्ट) के लिए प्रोटोविस ग्राफिकल टूलकिट। D3 द्वारा प्रतिस्थापित।

• कनेक्शन और संबंधों के लिए मू व्हील इंटरएक्टिव जेएस प्रतिनिधित्व (2008)

• JSViz 2007-युग ग्राफ चित्रण स्क्रिप्ट

• जावास्क्रिप्ट के लिए dagre ग्राफ लेआउट

गैर-जावास्क्रिप्ट पुस्तकालय

• ग्राफविज़ परिष्कृत ग्राफ़ दृश्य भाषा

  • ग्राफविज़ को एक ऑनलाइन इंटरैक्टिव डेमो के साथ यहां एम्सस्क्रिप्टेन का उपयोग करके जावास्क्रिप्ट में संकलित किया गया है

• भड़कना सुंदर और शक्तिशाली फ्लैश आधारित ग्राफ ड्राइंग

• नोडबॉक्स पाइथन ग्राफ विज़ुअलाइज़ेशन

Comments

हाँ, निर्देशित किनारों संभव हैं! G.addEdge ("चेरी", "सेब", {"निर्देशित": true}) का उपयोग करें;

— जोहान फिलिप स्ट्रैटहॉस

को भी जोड़ने की जरूरत है। Chart.js और chartnew.js पुस्तकालय। और यह ( chart.livegap.com ) इसके लिए उत्पन्न होता है

— उमर सेडकी

दो और उल्लेखनीय पुस्तकालय हैं जिन्हें सूची में जोड़ा जा सकता है, जिनके नाम हैं Linkuroius.js और VivaGraphJS ।

— 05कसज़ के

क्या YFILES लेआउट एल्गोरिथ्म के लिए कोई खुला स्रोत विकल्प है? जैसे कि yworks.com/products/yfiles-layout-alotypms-for-cytoscape

— रयान चाउ

मैंने एक मुफ्त और हल्की लाइब्रेरी बनाई है जो दूसरों के लिए उपयोगी हो सकती है: github.com/n-yousefi/Arg-Graph

— Naser Yousefi

Answer 2

अस्वीकरण: मैं Cytoscape.js का डेवलपर हूं

Cytoscape.js एक HTML5 ग्राफ़ विज़ुअलाइज़ेशन लाइब्रेरी है। एपीआई परिष्कृत है और jQuery सम्मेलनों का अनुसरण करता है, जिसमें शामिल हैं

• क्वेरी और फ़िल्टरिंग के लिए चयनकर्ता ( cy.elements("node[weight >= 50].someClass")जितना आप अपेक्षा करेंगे),
• जंजीर (जैसे cy.nodes().unselect().trigger("mycustomevent")),
• घटनाओं के लिए बाध्य करने के लिए jQuery जैसे कार्य,
• संग्रह के रूप में तत्व (जैसे jQuery के HTMLDomElements का संग्रह है),
• एक्स्टेंसिबिलिटी (कस्टम लेआउट, यूआई, कोर और संग्रह कार्य और इतने पर जोड़ सकते हैं),
• और अधिक।

यदि आप ग्राफ़ के साथ एक गंभीर वेबप बनाने के बारे में सोच रहे हैं, तो आपको कम से कम Cytoscape.js पर विचार करना चाहिए। यह मुफ़्त और खुला स्रोत है:

http://js.cytoscape.org

Comments

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

— 21 सितंबर को अधिकतम

ठीक है, माफ करना मेरी बुर। मैंने ठीक से नहीं देखा। हाँ यह अच्छी तरह से प्रलेखित है।

— स्टॉर्म

क्या यह एक पदानुक्रमित क्रम में रेखांकन लेआउट करने का एक तरीका है (एक लेआउट जो एक पेड़ की तरह दिखता है लेकिन यह वास्तव में एक ग्राफ है, जिसका अर्थ है कि कई माता-पिता के साथ नोड्स हैं)

— मीना

उस मामले के लिए डागरे और ब्रेडफर्स्ट लेआउट दोनों काम करते हैं

— अधिकतमक्रेनज

मुझे ड्रैग एन'एनड्रॉप के साथ ग्राफ को संपादित करना शुरू करना चाहिए और अंत में अंत करना होगा। यह पुस्तकालय कहता है कि वे चीजें अपरिवर्तनीय हैं। इसलिए मुझे एक और लाइब्रेरी की तलाश करनी है ...

— यूजीन जीआर। फिलिपोव

Answer 3

JsVIS बहुत अच्छा था, लेकिन बड़े रेखांकन के साथ धीमा था, और 2007 से इसे छोड़ दिया गया है।

प्रीफ़्यूज़ जावा में समृद्ध इंटरैक्टिव डेटा विज़ुअलाइज़ेशन बनाने के लिए सॉफ़्टवेयर टूल का एक सेट है। flare 2012 के बाद से जारी किए गए Adobe Flash Player में चलने वाले विज़ुअलाइज़ेशन बनाने के लिए एक एक्शनस्क्रिप्ट लाइब्रेरी है।

Comments

ये पुस्तकालय इस बिंदु पर थोड़े पुराने लगते हैं कि लोग आज क्या उपयोग कर रहे हैं? मैं विशेष रूप से स्वतंत्र xy श्रृंखला की साजिश रच रहा हूँ।

— ब्लोंग

-1 - प्रीफ्यूज जावा है, जावास्क्रिप्ट नहीं। फ्लेयर फ्लैश है, जावास्क्रिप्ट भी नहीं। JsVIS छोटी गाड़ी है और पुरानी है।

— अनातोली टेकटोनिक

@animuson: एक और ऑफ-टॉपिक एक: ओपी जावास्क्रिप्ट पुस्तकालयों के लिए पूछ रहा था। उत्तर में JS के बारे में एकमात्र हिस्सा एक पुस्तकालय है जिसे 2007 के बाद से विकसित नहीं किया गया है।

— दान डैस्कलेस्कु

Answer 4

वाणिज्यिक परिदृश्य में, सुनिश्चित करने के लिए एक गंभीर प्रतियोगी HTML के लिए yFiles है :

यह ऑफर:

• कस्टम डेटा का आसान आयात ( यह इंटरेक्टिव ऑनलाइन डेमो वास्तव में बहुत ओपी के लिए क्या देख रहा था)
• उपयोगकर्ता के इशारों के माध्यम से आरेख बनाने और हेरफेर करने के लिए इंटरएक्टिव संपादन (संपूर्ण संपादक देखें )
• पुस्तकालय के प्रत्येक पहलू को अनुकूलित करने के लिए एक विशाल प्रोग्रामिंग एपीआई
• ग्रुपिंग और नेस्टिंग के लिए समर्थन (दोनों इंटरैक्टिव, साथ ही लेआउट एल्गोरिदम के माध्यम से)
• किसी विशिष्ट UI टूलकिट पर निर्भर नहीं करता है, लेकिन लगभग किसी भी मौजूदा जावास्क्रिप्ट टूलकिट में एकीकरण का समर्थन करता है ( "एकीकरण" डेमो देखें )
• स्वचालित लेआउट (विभिन्न शैलियों, जैसे "पदानुक्रम", "कार्बनिक", "ऑर्थोगोनल", "पेड़", "परिपत्र", "रेडियल", और अधिक)
• स्वचालित परिष्कृत बढ़त मार्ग (ओर्थोगोनल और जैविक बढ़त मार्ग बाधा से बचाव)
• वृद्धिशील और आंशिक लेआउट (तत्वों को जोड़ना और निकालना और केवल आरेख के बाकी हिस्सों को बदलने में थोड़ा या बिल्कुल नहीं)
• ग्रुपिंग और नेस्टिंग के लिए समर्थन (दोनों इंटरैक्टिव, साथ ही लेआउट एल्गोरिदम के माध्यम से)
• ग्राफ विश्लेषण एल्गोरिदम के कार्यान्वयन (पथ, केंद्रीयता, नेटवर्क प्रवाह, आदि)
• एसवीजी + सीएसएस और कैनवस और आधुनिक जावास्क्रिप्ट लीवरेजिंग गुणों और अन्य अधिक ईएस 5 और ईएस 6 विशेषताओं जैसी एचटीएमएल 5 तकनीकों का उपयोग करता है (लेकिन उसी कारण से IE संस्करण 8 और निम्न में नहीं चलेगा)।
• एक मॉड्यूलर एपीआई का उपयोग करता है जिसे UMD लोडर का उपयोग करके ऑन-डिमांड लोड किया जा सकता है

यहां एक नमूना प्रतिपादन दिया गया है जो अधिकांश अनुरोधित विशेषताओं को दिखाता है:

पूर्ण प्रकटीकरण: मैं yWorks के लिए काम करता हूं, लेकिन Stackoverflow पर मैं अपने नियोक्ता का प्रतिनिधित्व नहीं करता।

Comments

एल्गोरिदम का सबसे अच्छा संग्रह, लेकिन यह भी सबसे बंद है, जिससे ओपन-सोर्स प्रोजेक्ट्स में उपयोग करना असंभव हो गया है :-(

— forresto

"सर्वश्रेष्ठ संग्रह" शायद सच है, लेकिन "सबसे बंद" सापेक्ष है, और "असंभव" गलत है: यह एक वाणिज्यिक लाइसेंस है, इसलिए जब तक कि ओपन-सोर्स प्रोजेक्ट एक वायरल लाइसेंस का उपयोग नहीं करता है , इसका उपयोग ओपन-सोर्स प्रोजेक्ट में किया जा सकता है। बेशक अन्य ओपन-सोर्स प्रोजेक्ट्स में ओपन-सोर्स प्रोजेक्ट्स का उपयोग करना कम समस्याग्रस्त है ...

— सेबस्टियन

आप समझ नहीं पा रहे हैं कि ओपन सोर्स कैसे काम करता है। क्या आप कह रहे हैं कि आपकी कंपनी एक ओपन-सोर्स प्रोजेक्ट को अनंत डेवलपर्स के लिए इस सॉफ्टवेयर का उपयोग करने का अधिकार दे सकती है, एक निश्चित, एक समय की लागत के लिए इसे अनंत डेवलपर्स और योगदानकर्ताओं और परीक्षकों को वितरित करने का अधिकार? बिल्कुल नहीं ।

— फेलिक्स सपरेली

@ FélixSaparelli: मेरा विश्वास करो: मैं करता हूँ। आप जो वर्णन करते हैं वह संभव है और इसी तरह की चीजें पहले भी की जा चुकी हैं। आप मानक लाइसेंस शर्तों से जुड़ रहे हैं, लेकिन निश्चित रूप से कस्टम समझौते संभव हैं और पहले किए गए हैं। हालांकि, इस पर चर्चा करने के लिए यह सही जगह नहीं है। सीधे yWorks से संपर्क करने के लिए स्वतंत्र महसूस करें।

— सेबस्टियन

Answer 5

जैसा कि गुरुज़ ने उल्लेख किया है, जेआईटी में कई प्यारे ग्राफ / ट्री लेआउट हैं, जिनमें काफी आकर्षक आरग्राफ और हाइपरट्री विज़ुअलाइज़ेशन शामिल हैं।

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