2013-05-20 13 views
11

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

मैं एक विज़ुअलाइज़ेशन फ्रेमवर्क ढूंढ रहा हूं जो मेरे लिए चित्रकारी करता है।

आवश्यकताओं हैं कि टूलकिट

  • लेबल नोड्स (और उम्मीद है कि किनारों)
  • स्वचालित रूप से सही आकार के लिए ग्राफ (मैं अच्छा आयाम लगता है की जरूरत नहीं है) बाहर अंतरिक्ष कि मैं दिया जा सकता है अंतरिक्ष अनंत है (स्क्रॉल बार ठीक हैं)
  • लेआउट ग्राफ अच्छी तरह से इतना है कि यह बेहतर नहीं लगती क्योंकि गंदा
  • < = 5000 नोड्स
  • जे एस केवल (कोई Fl के साथ रन के साथ ठीक हो राख या डेस्कटॉप ऐप्स)

वैकल्पिक रूप से, यह अच्छा होगा अगर यह नोड्स को स्थानांतरित करना और बेहतर अवलोकन के लिए ग्राफ के हिस्सों को हाइलाइट करना या छिपाना आसान हो।

इससे कोई फर्क नहीं पड़ता कि क्या समर्थित है (एसवीजी, कैनवास, सब ठीक है)।

मैं काफी कुछ पुस्तकालयों अब तक (विशेष रूप से Graph visualization library in JavaScript से) पर ध्यान दिया है, लेकिन एक उपयुक्त एक अभी तक नहीं मिला:

  • d3 अच्छा है लेकिन केवल नोड ग्राफ यह बचाता है एक शक्ति ग्राफ है, जो वास्तविक समय भौतिकी पर केंद्रित है। एक बार लोड होने के बाद, आपको भौतिकी इंजन को स्थिर करने के लिए इंतजार करना और देखना होगा। मुझे एनिमेशन और न ही बल की आवश्यकता नहीं है, और ग्राफ को तुरंत दिखाना चाहते हैं।
  • GraphDracula का examples काफी कुछ है जो मैं ढूंढ रहा हूं, लेकिन पहले से ही 70 नोड्स और 400 किनारों के साथ, ड्राइंग प्रदर्शन वास्तव में खराब हो जाता है। इसमें बहुत कम documentation है (35 लाइन कोड उदाहरण होने के नाते)।

क्या आप मेरी आवश्यकताओं को पूरा करने वाले कुछ जानते हैं? धन्यवाद!

+0

क्या आप इस के लिए कोई अच्छा जवाब ढूंढने में सक्षम थे, कृपया? मुझे डी 3 के साथ भी एक ही समस्या का सामना करना पड़ रहा है जिसमें ग्राफ के लिए एक अच्छा ऑटो लेआउट नहीं है। –

+0

दुर्भाग्य से मुझे अभी तक कोई अच्छा जवाब नहीं मिला है। – nh2

+1

यह भी देखें http://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript – Bryan

उत्तर

1

डैग्रे ग्राफ़ लेआउट (क्षैतिज/लंबवत संरेखण, लेबल इत्यादि) के लिए बहुत अच्छी तरह से काम करता है और इसमें डी 3 रेंडरर है।

https://github.com/cpettitt/dagre-d3 (जाँच अंत में छवियों)

https://github.com/cpettitt/dagre

+0

क्या डैग्रे समर्थन नोड्स के ढहने योग्य है? –

+1

cytoscape.js डैग्रे लेआउट लाइब्रेरी का भी उपयोग कर सकते हैं। http://js.cytoscape.org/demos/e52c2fbc0b09edd6ec46/ देखें –

2

एक व्यावसायिक परिदृश्य में आप विचार करना चाह सकते yFiles for HTML:

अपनी आवश्यकताओं के बारे में यह कर सकते हैं:

  • किसी भी जोड़े नोड्स और किनारों के लिए लेबल की संख्या
  • पी लगभग अनंत स्क्रॉलिंग/पैनिंग/ज़ूमिंग क्षेत्र
  • स्वचालित लेआउट एल्गोरिदम की एक बड़ी विविधता का उपयोग करके अपने ग्राफ को स्वचालित रूप से ले जाएं। निर्भरता ग्राफ के लिए, Hierarchic Layouter बहुत अच्छी तरह से अनुकूल है
  • बड़ी संख्या में नोड्स वाले डेस्कटॉप ब्राउज़र पर अच्छी तरह से काम करता है।दृश्य जटिलता और ग्राफ संरचना के आधार पर, आज के ब्राउज़र कार्यान्वयन के साथ 5000 तत्व मुश्किल हो सकते हैं।
  • यह
  • मुख्य बैकएंड के रूप में एसवीजी का उपयोग करता है कोई निर्भरता के साथ एक शुद्ध जावास्क्रिप्ट पुस्तकालय है, लेकिन यह भी कैनवास का लाभ उठा सकें
  • पुस्तकालय well documented है, जो इसकी जटिलता को देखते हुए

यहाँ एक है आवश्यक है दिखाने वाला स्क्रीनशॉट कार्रवाई में ऊपर सुविधाओं में से कुछ - लेआउट स्वचालित रूप से गणना की गई थी:

enter image description here

अस्वीकरण: मैं उस कंपनी के लिए काम करता हूं जो लाइब्रेरी बनाता है। एसओ/एसई पर मैं अपने नियोक्ता का प्रतिनिधित्व नहीं करता हूं। यह मेरी खुद की पोस्ट है।

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