शुद्ध जावास्क्रिप्ट ग्राफविज़ समकक्ष [बंद]

Question

क्या किसी को दिशात्मक प्रवाह आरेखों के शुद्ध, जावास्क्रिप्ट आधारित कार्यान्वयन के बारे में पता है जो ग्राफविज़ उत्पन्न करने में सक्षम है? मुझे सुंदर दृश्यों के उत्पादन में कोई दिलचस्पी नहीं है, लेकिन प्रत्येक नोड की अधिकतम गहराई का पता लगाने के लिए संगणना, बेज़ियर लाइनों के लेआउट के साथ जो एक पेड़ के बजाय एक ग्राफ के साथ काम कर रहे हैं जब आप किनारों को काट रहे हैं जानकारी की। मैं एक ब्राउज़र के भीतर इस कोड को चलाना चाहता हूं; मुझे पता है कि मैं अपने नोड सर्वर में ग्राफविज़ को आसानी से एक एक्सटेंशन के रूप में एम्बेड कर सकता हूं, या popen()यह भी और .dotप्रारूप में ग्राफ़ जानकारी पर स्ट्रीम कर सकता हूं ।

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

Comments

क्या आपके पास ऐसे चित्र का एक उदाहरण है, जो हममें से किसी के लिए नहीं है ग्राफविज़ से परिचित हैं?

— मैट बॉल

यह जावास्क्रिप्ट में ग्राफ़ विज़ुअलाइज़ेशन कोड

— डैनियल प्राइडेन

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

— Armentage

Answer 1

.Dot कैनवास रेंडरर के इस शुद्ध जावास्क्रिप्ट कार्यान्वयन पर एक नज़र डालें:

http://ushiroad.com/jsviz/

पुस्तकालय को प्रलेखित नहीं किया गया है - लेखक को निश्चित रूप से इसे प्रचारित करने और अधिक दस्तावेज़ करने के लिए चाहिए (मैं उसे बहुत कम से कम गीथूब पर डाल देने के सुझाव के लिए संपर्क करूँगा)।

अपडेट : कोड को github पर धकेल दिया गया है: https://github.com/gyuque/livizjs

अद्यतन (14/2/2013) : एक और दावेदार पैदा हो गया है! विषय में रुचि रखने वाले किसी को निश्चित रूप से विज़ के उदाहरण पृष्ठ और जीथब रेपो पर एक नज़र डालनी चाहिए ।

अद्यतन (7/16/2020) : (सात साल बाद) http://webgraphviz.com/ भी बढ़िया है! :-)

Comments

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

— १४:१४ पर captncraig

अब तक, यह वही है जो मैं मूल प्रश्न के लिए देख रहा था। यह केवल एक RENDERER नहीं है, यह जानता है कि निर्देशित ग्राफ की गणना कैसे करें। क्या यह कहीं बैकएंड पर DOT चल रहा है, या मेरे ब्राउज़र पर पूरी ग्राफ़ पीढ़ी एल्गोरिथम चल रहा है?

— Armentage

@Armentage, यह आपके ब्राउज़र में पूरी तरह से चल रहा है। ग्रेविविज़ को जावास्क्रिप्ट के लिए संकलित किया गया है, ईमस्क्रिप्ट के लिए धन्यवाद । स्रोत कोड, हालांकि जैसा कि यह हो सकता है दस्तावेज नहीं किया गया था, अब सौभाग्य से (ट्विटर और ई-मेल पर लेखक को परेशान करने के बाद) ;-) यहां उपलब्ध है । प्रोजेक्ट को फोरकास्ट करना और इसके लिए एक आसान-से-उपयोग वाला API बनाना एक पहला शानदार कदम होगा ..!

— ग्रेग सैडेट्स्की

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

— ग्रेग सैडेत्स्की

Livizjs एक महान उपकरण है, लेकिन ध्यान दें कि यह पूरी भाषा का समर्थन नहीं करता है, जैसे कि 'क्लस्टर'

— SirLenz0rlot

Answer 2

दूर-दूर तक खोज करने के बाद आखिरकार मुझे जवाब मिल गया।

इसका समाधान यह था कि कोई व्यक्ति ग्राफविज़ को llvm + emscripten का उपयोग करके जावास्क्रिप्ट में संकलित करता है। लिंक यहां दिया गया है:

http://viz-js.com/

स्रोत यहां पाया जा सकता है: https://github.com/mdaines/viz.js

और बस एक वेबपेज का उपयोग करने के लिए:

var graphviz_text = ...;
document.body.innerHTML += Viz(graphviz_text, "svg");

Comments

यह वही है जो मैं भी

— ढूंढ

अपडेट: मैंने एक डेमो साइट बनाई है जिसमें दिखाया गया है कि कैसे viz.js में हुकिंग मजेदार और आसान है! Www.webgraphviz.com पर इसकी जाँच करें

— Zachary Vorhies

दिए गए गिथब लिंक टूट गए हैं

— जेम

github.com/mdaines/viz.js

— सोमू

Answer 3

सभी विकल्पों को देखने के बाद, मैंने पाया कि viz.js ( https://github.com/mdaines/viz.js/ ) jsviz और graphviz.js के आधार पर वास्तव में एक वेबपेज से एपीआई उपयोगी है, और इसके लिए पर्याप्त उदाहरण हैं। समझना।

Comments

viz.js महान है और बहुत आसान, नहीं यह वर्तमान में समर्थन नहीं करता है कि लेबल एचटीएमएल की तरह: graphviz.org/doc/info/shapes.html#html

— SirLenz0rlot

Answer 4

एक ग्राफविज़ को जावास्क्रिप्ट में बदलने की कोशिश कर सकता है, जैसे कि यह 'पीडीएफ रीडर' उदाहरण के लिए किया गया था: https://github.com/kripken/emscripten

Comments

यह एक बहुत बड़ा सुझाव है। मैं खुद जेएस को कोड का अनुवाद करने की कोशिश करने के बारे में सोच रहा था ...... लेकिन यह llvm चाल सुंदर पागलपन है!

— अरमान

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

— सिंथेसाइजरपटेल

Answer 5

यह रेडीमेड ग्राफविज रिप्लेसमेंट नहीं है बल्कि d3.js एक लाइब्रेरी है जो दिए गए डेटा से विभिन्न लेआउट कर सकता है और ग्राफविज को लागू करने के लिए एक बेहतरीन प्लेटफॉर्म होगा।

यहां बल-निर्देशित लेआउट का एक उदाहरण दिया गया है, जो ग्राफविज़ करता है।

यहाँ बहुत भयानक इंटरैक्टिव स्लाइड के साथ लेआउट के बारे में एक भाषण है ।

परियोजना को जानने के लिए, ट्यूटोरियल बहुत अच्छे हैं।

Comments

github.com/cpettitt/dagre-d3 जावास्क्रिप्ट में डॉट आरेख को लागू करता है। आप cpettitt.github.io/project/dagre-d3/latest/demo/… पर डेमो के साथ खेल सकते हैं ।

— आर्थर

Answer 6

यहाँ ग्रेविविज़ का एक क्रॉस संकलन है जो ईस्क्रिप्टस्क्रिप्ट के उपयोग से किया गया है

https://github.com/bpartridge/graphviz.js