Bibliothek zur Visualisierung von Graphen in JavaScript

Ich habe gerade das zusammengestellt, wonach Sie vielleicht suchen: http://www.graphdracula.net Es ist JavaScript mit gerichteten Graphen, SVG und man kann sogar die Knoten herumziehen. Es muss noch etwas optimiert werden, ist aber durchaus brauchbar. Sie erstellen Knoten und Kanten einfach mit JavaScript-Code wie diesem:

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

Ich habe die bereits erwähnte Raphael JS-Bibliothek (das Graffle-Beispiel) sowie etwas Code für einen Force-basierten Graph-Layout-Algorithmus verwendet, den ich im Netz gefunden habe (alles Open Source, MIT-Lizenz). Wenn Sie irgendwelche Anmerkungen haben oder eine bestimmte Funktion benötigen, kann ich sie implementieren, fragen Sie einfach!

Vielleicht möchten Sie auch einen Blick auf andere Projekte werfen! Unten sind zwei Meta-Vergleiche:

• [SocialCompare] (http://socialcompare.com/en/comparison/javascript-graphs-and-charts-libraries) hat eine umfangreiche Liste von Bibliotheken, und die "Node / edge graph" Zeile filtert nach Graph-Visualisierung.
• DataVisualization.ch hat viele Bibliotheken evaluiert, darunter auch Node/Graph-Bibliotheken. Leider gibt es keinen direkten Link, so dass Sie nach "graph" filtern müssen: Hier's eine Liste von ähnlichen Projekten (einige wurden hier bereits erwähnt):

  Reine JavaScript-Bibliotheken

• vis.js unterstützt viele Arten von Netzwerk-/Kanten-Diagrammen, sowie Zeitleisten und 2D/3D-Diagramme. Auto-Layout, Auto-Clustering, federnde Physik-Engine, mobilfreundlich, Tastaturnavigation, hierarchisches Layout, Animation etc. [MIT lizenziert] (https://github.com/almende/vis) und entwickelt von einer niederländischen Firma, die sich auf die Erforschung von selbstorganisierenden Netzwerken spezialisiert hat.
• Cytoscape.js - interaktive Graphenanalyse und -visualisierung mit mobiler Unterstützung, die den jQuery-Konventionen folgt. Finanziert durch NIH-Zuschüsse und entwickelt von @maxkfranz (siehe seine Antwort unten) mit Hilfe von mehreren Universitäten und anderen Organisationen.
• The JavaScript InfoVis Toolkit - Jit, ein interaktives, vielseitig einsetzbares Framework zum Zeichnen und Layouten von Graphen. Siehe zum Beispiel den Hyperbolic Tree. Entwickelt vom Twitter Dataviz-Architekten Nicolas Garcia Belmonte und 2010 von Sencha gekauft.
• D3.js Leistungsstarke Mehrzweck-JS-Visualisierungsbibliothek, der Nachfolger von Protovis. Siehe das force-directed graph Beispiel, und andere Graph Beispiele in der gallery.
• Die Plotly's JS-Visualisierungsbibliothek verwendet D3.js mit JS-, Python-, R- und MATLAB-Bindungen. Siehe ein nexworkx Beispiel in IPython hier, ein Beispiel für menschliche Interaktion hier und JS Embed API.
• sigma.js Leichtgewichtige, aber leistungsfähige Bibliothek zum Zeichnen von Graphen
• jsPlumb jQuery-Plugin zur Erstellung interaktiver verbundener Diagramme
• Springy - ein zwangsgesteuerter Graph-Layout-Algorithmus
• Processing.js Javascript-Portierung der Processing-Bibliothek von John Resig
• JS Graph It - Drag'n'Drop-Boxen, die durch gerade Linien verbunden sind. Minimales Auto-Layout der Linien.
• RaphaelJS's Graffle - interaktives Graph-Beispiel einer generischen Mehrzweck-Vektorzeichenbibliothek. RaphaelJS kann kein automatisches Layout von Knoten erstellen; dafür benötigen Sie eine andere Bibliothek.
• JointJS Core - David Durman's MPL-lizensierte Open-Source-Diagrammbibliothek. Es kann verwendet werden, um entweder statische Diagramme oder vollständig interaktive Diagramm-Tools und Application Builders zu erstellen. Funktioniert in Browsern, die SVG unterstützen. Layout-Algorithmen, die nicht im Kernpaket enthalten sind
• mxGraph Ehemals kommerzielle HTML 5-Diagrammbibliothek, jetzt unter Apache v2.0 verfügbar. mxGraph ist die in draw.io verwendete Basisbibliothek.

Kommerzielle Bibliotheken

• GoJS Interaktive Bibliothek zum Zeichnen und Layouten von Graphen
• yFiles for HTML Kommerzielle Bibliothek zum Zeichnen und Layouten von Graphen
• KeyLines Kommerzielles JS-Netzwerkvisualisierungs-Toolkit
• ZoomCharts Kommerzielle Mehrzweck-Visualisierungsbibliothek
• Syncfusion JavaScript Diagram Kommerzielle Diagrammbibliothek zum Zeichnen und Visualisieren.

  Verlassene Bibliotheken

• Cytoscape Web Einbettbarer JS-Netzwerkbetrachter (keine neuen Funktionen geplant; Nachfolger von Cytoscape.js)
• Canviz JS Renderer für Graphviz-Graphen. Abandoned im Sep 2013.
• arbor.js Anspruchsvolles Graphing mit netter Physik und Augenschmaus. Abandoned in May 2012. Mehrere semi-maintained Forks existieren.
• jssvggraph "Der einfachste mögliche zwangsgerichtete Graph-Layout-Algorithmus, implementiert als Javascript-Bibliothek, die SVG-Objekte verwendet". Im Jahr 2012 aufgegeben.
• jsdot Client-seitige Anwendung zum Zeichnen von Graphen. Abandoned in 2011.
• Protovis Grafisches Toolkit für Visualisierung (JavaScript). Wurde durch d3 ersetzt.
• Moo Wheel Interaktive JS-Darstellung für Verbindungen und Beziehungen (2008)
• JSViz Skript zur Graphenvisualisierung aus dem Jahr 2007
• dagre Graph-Layout für JavaScript

  Nicht-Javascript-Bibliotheken

• Graphviz Anspruchsvolle Graphenvisualisierungssprache
  • Graphviz wurde mit Emscripten zu Javascript kompiliert hier mit einer interaktiven Online-Demo hier
• Flare Wunderschöne und leistungsfähige Flash-basierte Graphendarstellung
• NodeBox Python-Graph-Visualisierung

JsVIS war ziemlich gut, aber langsam bei größeren Graphen, und wird seit 2007 nicht mehr eingesetzt.

prefuse ist eine Reihe von Software-Tools zur Erstellung interaktiver Datenvisualisierungen in Java. flare ist eine ActionScript-Bibliothek zur Erstellung von Visualisierungen, die im Adobe Flash Player ausgeführt werden können, und wird seit 2012 nicht mehr weiterentwickelt.

Wie guruz erwähnte, bietet die JIT mehrere schöne Graphen-/Baum-Layouts, einschließlich recht ansprechender RGraph- und HyperTree-Visualisierungen.

Außerdem habe ich gerade eine super einfache SVG-basierte Implementierung auf github (keine Abhängigkeiten, ~125 LOC), die gut genug für kleine Graphen in modernen Browsern funktionieren sollte.