जावास्क्रिप्ट में ग्राफ दृश्यता पुस्तकालय

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

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

0
ro fr bn
जोड़ा लेखक linker, स्रोत

4 उत्तर

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

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

  • selectors for querying and filtering (cy.elements("node[weight >= 50].someClass") does much as you would expect),
  • chaining (e.g. cy.nodes().unselect().trigger("mycustomevent")),
  • jQuery-like functions for binding to events,
  • elements as collections (like jQuery has collections of HTMLDomElements),
  • extensibility (can add custom layouts, UI, core & collection functions, and so on),
  • and more.

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

http://js.cytoscape.org

0
जोड़ा
क्या इसमें पदानुक्रमित क्रम में लेआउट ग्राफ का एक तरीका है (एक लेआउट जो पेड़ की तरह दिखता है लेकिन वास्तव में यह एक ग्राफ है, जिसका अर्थ है कि कई माता-पिता के साथ नोड्स हैं)
जोड़ा लेखक Mina, स्रोत
सभी एपीआई पूरी तरह से प्रलेखित हैं। दस्तावेज़ आपको शुरू करने के माध्यम से भी कदम उठाते हैं (यानी init)। अलग-अलग एपीआई के लिए भी चल रहे उदाहरण हैं, और लाइव डेमो हैं। कार्यक्षमता किसी भी जेएस ग्राफ lib से कहीं अधिक है और दस्तावेज़ अधिकांश परियोजनाओं की तुलना में अधिक व्यापक हैं - चाहे वाणिज्यिक या ओपनसोर्स। दस्तावेज़ों में आपके लिए वास्तव में क्या कमी है?
जोड़ा लेखक maxkfranz, स्रोत
उस मामले के लिए डैग्रे और ब्रेडफर्स्ट लेआउट दोनों काम करते हैं
जोड़ा लेखक maxkfranz, स्रोत
अपरिवर्तनीयता का मतलब लचीलापन नहीं है - यह केवल चीजों को विश्वसनीय और सुसंगत रखने के लिए रहता है। eles.move() और निम्न एक्सटेंशन : edgehandles , < कोड> एज-एडिटेशन , जोड़ा लेखक maxkfranz, स्रोत
ठीक है, मेरी बुराई क्षमा करें। मैं ठीक से नहीं देखा था। हां यह अच्छी तरह से प्रलेखित है।
जोड़ा लेखक Storm, स्रोत
मुझे ग्राफ के ड्रैग'ड्रॉप के साथ ग्राफ को संपादित करना होगा, अंत समाप्त होता है और अंत समाप्त होता है। यह पुस्तकालय कहता है कि वे चीजें अपरिवर्तनीय हैं। तो मुझे एक और पुस्तकालय की तलाश करनी है ...
जोड़ा लेखक Evgeniy Philippov, स्रोत

JsVIS was pretty nice, but slow with larger graphs, and has been abandoned since 2007.

prefuse is a set of software tools for creating rich interactive data visualizations in Java. flare is an ActionScript library for creating visualizations that run in the Adobe Flash Player, abandoned since 2012.

0
जोड़ा
-1 - प्रीफ्यूज जावा है, जावास्क्रिप्ट नहीं। चमक फ़्लैश है, जावास्क्रिप्ट भी नहीं। जेएसवीआईएस छोटी और पुरानी है।
जोड़ा लेखक anatoly techtonik, स्रोत
@animuson: एक और ऑफ-विषय एक: ओपी जावास्क्रिप्ट पुस्तकालयों के लिए पूछ रहा था। उत्तर में जेएस के बारे में एकमात्र हिस्सा एक पुस्तकालय है जिसे 2007 से विकसित नहीं किया गया है।
जोड़ा लेखक Dan Dascalescu, स्रोत
इस पुस्तकालय में इस बिंदु पर थोड़ा सा पुराना प्रतीत होता है, आज लोग क्या उपयोग कर रहे हैं? मैं विशेष रूप से स्वतंत्र एक्स-वाई श्रृंखला की साजिश में देख रहा हूं।
जोड़ा लेखक blong, स्रोत
पुराने जवाब के महत्व को कम करने के लिए -1 downvoting
जोड़ा लेखक a20, स्रोत

I've just put together what you may be looking for: http://www.graphdracula.net

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

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

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


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

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

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

यहां समान परियोजनाओं की एक सूची दी गई है (कुछ पहले से ही यहां उल्लेख किए गए हैं):

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

  • vis.js supports many types of network/edge graphs, plus timelines and 2D/3D charts. Auto-layout, auto-clustering, springy physics engine, mobile-friendly, keyboard navigation, hierarchical layout, animation etc. MIT licensed and developed by a Dutch firm specializing in research on self-organizing networks.

  • Cytoscape.js - interactive graph analysis and visualization with mobile support, following jQuery conventions. Funded via NIH grants and developed by by @maxkfranz (see his answer below) with help from several universities and other organizations.

  • The JavaScript InfoVis Toolkit - Jit, an interactive, multi-purpose graph drawing and layout framework. See for example the Hyperbolic Tree. Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010.

  • D3.js Powerful multi-purpose JS visualization library, the successor of Protovis. See the force-directed graph example, and other graph examples in the gallery.

  • Plotly's JS visualization library uses D3.js with JS, Python, R, and MATLAB bindings. See a nexworkx example in IPython here, human interaction example here, and JS Embed API.

  • sigma.js Lightweight but powerful library for drawing graphs

  • jsPlumb jQuery plug-in for creating interactive connected graphs

  • Springy - a force-directed graph layout algorithm

  • Processing.js Javascript port of the Processing library by John Resig

  • JS Graph It - drag'n'drop boxes connected by straight lines. Minimal auto-layout of the lines.

  • RaphaelJS's Graffle - interactive graph example of a generic multi-purpose vector drawing library. RaphaelJS can't layout nodes automatically; you'll need another library for that.

  • JointJS Core - David Durman's MPL-licensed open source diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders. Works in browsers supporting SVG. Layout algorithms not-included in the core package

  • mxGraph Previously commercial HTML 5 diagramming library, now available under Apache v2.0. mxGraph is the base library used in draw.io.

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

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

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

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

  • ज़ूमचेर्ट्स वाणिज्यिक बहु-उद्देश्य विज़ुअलाइजेशन लाइब्रेरी

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

  • साइटोसस्केप वेब एम्बेड करने योग्य जेएस नेटवर्क व्यूअर (कोई नई विशेषताएं योजनाबद्ध नहीं है; Cytoscape.js द्वारा सफल)

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

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

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

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

  • विजयीकरण (जावास्क्रिप्ट) के लिए Protovis ग्राफ़िकल टूलकिट। डी 3 द्वारा बदला गया।

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

  • JSViz 2007-युग ग्राफ़ विज़ुअलाइजेशन स्क्रिप्ट

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

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

0
जोड़ा
ग्राफड्राकुला खुद मर चुका प्रतीत होता है (इसे तीन वर्षों में अपडेट नहीं किया गया है)। क्या हम इसे "छोड़े गए पुस्तकालयों" सूची में जोड़ सकते हैं?
जोड़ा लेखक machineghost, स्रोत
@ जोहान फिलिपस्ट्रैथौसेन कोई रास्ता है, मैं एक नोड के लिए एक ईवेंट हैंडलर जोड़ सकता हूं? मैं प्रत्येक नोड के लिए X, वाई निर्देशांक को कैप्चर करना चाहता हूं। (graphdracula के लिए)
जोड़ा लेखक Suhail Gupta, स्रोत
मैंने एक मुफ्त और हल्के लाइब्रेरी बनाई है जो दूसरों के लिए उपयोगी हो सकती है: github.com/n- yousefi / Arg-ग्राफ़
जोड़ा लेखक Naser Yousefi, स्रोत
क्या मैं कोड द्वारा नोड की स्थिति निर्धारित कर सकता हूं? (शो केस में यादृच्छिक पदों पर पुनर्विचार करना अधिकांश लोगों की अपेक्षा नहीं करेगा!)
जोड़ा लेखक forsberg, स्रोत
डैग्रे को अब सक्रिय रूप से विकसित नहीं किया जा रहा है। मैं सूची अपडेट करूंगा।
जोड़ा लेखक david, स्रोत
मैं संपादित नहीं कर सकता लेकिन यहां Almende है। मैंने इसके आधार पर एक दृश्य शब्दकोश बनाया है।
जोड़ा लेखक Val, स्रोत
ZoomCharts नेट चार्ट घटक का उपयोग करके अच्छा ग्राफ विज़ुअलाइज़ेशन करता है।
जोड़ा लेखक jancha, स्रोत
हाँ, निर्देशित किनारों संभव है! G.addEdge ("चेरी", "सेब", {"निर्देशित": सत्य} का प्रयोग करें);
जोड़ा लेखक Johann Philipp Strathausen, स्रोत
यह मर चुका नहीं है मैंने अभी हाल ही में कुछ नए संस्करण जारी किए हैं, कृपया पोस्ट और गिथब प्रोफाइल की जांच करें।
जोड़ा लेखक Johann Philipp Strathausen, स्रोत
chart.js और chartnew.js लाइब्रेरी को जोड़ने की आवश्यकता है। और यह ( charts.livegap.com ) इसके लिए उत्पन्न होता है
जोड़ा लेखक Omar Sedki, स्रोत
अच्छी समीक्षा, उल्टा। इसके अलावा प्रतिक्रिया-सिग्माज है - सिग्माजेएस के लिए प्रतिक्रिया घटक, उपयोग करने में काफी आसान
जोड़ा लेखक Max Vorobjev, स्रोत
दो और उल्लेखनीय पुस्तकालय हैं जिन्हें सूची में जोड़ा जा सकता है, अर्थात् Linkuroius.js और VivaGraphJS
जोड़ा लेखक nikodem92, स्रोत
क्या YFILES लेआउट एल्गोरिदम के लिए कोई ओपन सोर्स विकल्प है? जैसे कि yworks.com/products/yfiles-layout-algorithms-for- cytoscape
जोड़ा लेखक Ryan Chou, स्रोत

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

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

0
जोड़ा