2011-07-08 20 views
17

कौन सी जावास्क्रिप्ट लाइब्रेरी (मुफ्त या वाणिज्यिक) कंप्यूटर नेटवर्क आरेख या विद्युत आरेख बना सकती है। इसके अलावा, कि चित्र आदिआरेख निर्माण के लिए जावास्क्रिप्ट लाइब्रेरी?

धन्यवाद में विभिन्न आइम के बीच एनिमेशन का समर्थन करता है।

+0

नूने उल्लेख किया है GoJS (http://www.gojs.net), शक्तिशाली दिखता हो। – fuzzyanalysis

उत्तर

10

चेक बाहर इन तीन पुस्तकालयों और अगर वे आपकी सहायता कर सकते हैं:

Raphael

Raphaël एक छोटी सी JavaScript लाइब्रेरी कि वेब पर वेक्टर ग्राफिक्स के साथ अपने काम को आसान बनाने चाहिए। आप अपने खुद के विशिष्ट चार्ट या छवि फसल पैदा करने के लिए करना चाहते हैं और विजेट बारी बारी से, उदाहरण के लिए हैं, तो आप यह बस और इस पुस्तकालय के साथ आसानी से प्राप्त कर सकते हैं। Raphaël [ 'ræfeɪəl] एसवीजी W3C सिफ़ारिश और VML बनाने ग्राफिक्स के लिए एक आधार के रूप उपयोग करता है। यह हर चित्रमय वस्तु आप बनाते हैं, तो यह भी एक डोम वस्तु है, इसलिए आप जावास्क्रिप्ट ईवेंट हैंडलर्स देते हैं या उन्हें बाद में संशोधित कर सकते हैं। Raphaël के लक्ष्य एक एडाप्टर कि ड्राइंग वेक्टर आर्ट संगत क्रॉस-ब्राउज़र और आसान कर देगा प्रदान करना है।

Protovis

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

Processingjs

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

मूल रूप से बेन फ्राई और Casey Reas द्वारा विकसित, प्रसंस्करण एक खुला स्रोत प्रोग्रामिंग जावा के आधार पर भाषा के रूप में शुरू कर दिया मदद करने के लिए इलेक्ट्रॉनिक आर्ट्स और दृश्य डिजाइन समुदायों एक दृश्य संदर्भ में कंप्यूटर प्रोग्रामिंग की मूल बातें सीखते हैं। प्रसंस्करण.जेएस इसे अगले स्तर तक ले जाता है, प्रोसेसिंग कोड को किसी भी HTML5 संगत ब्राउज़र द्वारा संचालित किया जा सकता है, जिसमें वर्तमान फ़ायरफ़ॉक्स, सफारी, क्रोम, ओपेरा और इंटरनेट एक्सप्लोरर के संस्करण शामिल हैं। प्रसंस्करण.जेएस प्रसंस्करण और वेब डेवलपर्स के लिए दोनों वेब पर दृश्य प्रोग्रामिंग सर्वश्रेष्ठ प्रोग्रामिंग लाता है।

+0

+1 ये आरेखों के लिए बहुत अच्छे हैं जो उपयोगकर्ता द्वारा संचालित नहीं हैं। उपयोगकर्ता द्वारा संचालित आरेख निर्माण के लिए, मैं goJS (http://www.gojs.net) की अनुशंसा करता हूं। –

+0

पोस्ट करने के लिए – fuzzyanalysis

2
+5

उनमें से कोई भी netowrk आरेख या विद्युत आरेख बना सकता है। वे चार्टिंग के लिए अच्छे हैं। उत्तर के लिए धन्यवाद। राफेल – M99

11

चित्रों को चित्रित करने के लिए मुफ्त ऑनलाइन ऐप आज़माएं, draw.io। यह चित्रों को चित्रित करने के लिए mxGraph लाइब्रेरी का उपयोग करता है।

अस्वीकरण:

मैं एक सॉफ्टवेयर JGraph के साथ जुड़े डेवलपर हूं।

15

जवाब बिल्कुल JointJS

+0

यह एक दयालु बात है कि JointJS 'उपयोगकर्ता द्वारा संचालित आरेख निर्माण पुस्तकालय, रैपिड, परीक्षण उपयोग की अनुमति नहीं देता है। – fuzzyanalysis

5

है .... इतना ही नहीं बल्कि Draw2D

यह आसान आरेख निर्माण के लिए एक जेएस lib है। एपीआई जावा/सी # सिंटैक्स की तरह अधिक है। प्रसिद्ध राफेलजेएस लिब के ऊपर अमूर्तता और प्रबंधन परत।

कोड उदाहरण:

 var canvas = new draw2d.Canvas("gfx_holder"); 

     // Create two standard nodes for "start" and "end" and link 
     // this figures with a standard Connector 
     // 
     var start = new draw2d.shape.node.Start(); 
     var end = new draw2d.shape.node.End(); 

     canvas.addFigure(start, 80,180); 
     canvas.addFigure(end, 450,250); 

     // Add a connection via API calls between Start and Stop 
     // 
     var connection = new draw2d.Connection(); 
     connection.setSource(start.getOutputPort(0)); 
     connection.setTarget(end.getInputPort(0)); 
     canvas.addFigure(connection); 
संबंधित मुद्दे