Bibliothek zur Visualisierung von Graphen in JavaScript

Question

Ich habe eine Datenstruktur, die einen gerichteten Graphen darstellt, und ich möchte diesen dynamisch auf einer HTML-Seite darstellen. Diese Graphen werden in der Regel nur ein paar Knoten, vielleicht zehn am oberen Ende, so meine Vermutung ist, dass die Leistung nicht eine große Sache sein wird. Idealerweise möchte ich in der Lage, es mit jQuery Haken, so dass Benutzer das Layout manuell durch Ziehen der Knoten um zwicken können.

Hinweis: Ich bin nicht auf der Suche nach einer Charting-Bibliothek.

Answer 1

Ich habe gerade zusammengestellt, wonach Sie vielleicht suchen: http://www.graphdracula.net

Es handelt sich um JavaScript mit gerichteten Graphen, SVG und Sie können die Knoten sogar herumziehen. Es muss noch etwas optimiert werden, ist aber durchaus brauchbar. Mit JavaScript-Code wie diesem können Sie ganz einfach Knoten und Kanten erstellen:

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 sich auch andere Projekte ansehen! Nachstehend finden Sie zwei Meta-Vergleiche:

• SocialCompare verfügt über eine umfangreiche Liste von Bibliotheken, und die Zeile "Node / edge graph" filtert nach Bibliotheken zur Visualisierung von Graphen.

• 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 finden Sie eine Liste ähnlicher Projekte (einige wurden hier bereits erwähnt):

Reine JavaScript-Bibliotheken

• vis.js unterstützt viele Arten von Netzwerk-/Eckendiagrammen, sowie Zeitleisten und 2D/3D-Diagramme. Auto-Layout, Auto-Clustering, federnde Physik-Engine, mobilfreundlich, Tastaturnavigation, hierarchisches Layout, Animation usw. MIT lizenziert und wurde von einem niederländischen Unternehmen entwickelt, das auf die Erforschung selbstorganisierender Netzwerke spezialisiert ist.

• Cytoscape.js - interaktive Graphenanalyse und -visualisierung mit mobiler Unterstützung, entsprechend den jQuery-Konventionen. Finanziert durch NIH-Zuschüsse und entwickelt von @maxkfranz (siehe seine Antwort unten ) mit Unterstützung mehrerer Universitäten und anderer Organisationen.

• Das JavaScript-InfoVis-Werkzeugset - Jit, ein interaktives Mehrzweck-Framework zum Zeichnen und Layouten von Grafiken. Siehe zum Beispiel die Hyperbolischer Baum . Erstellt von Twitter dataviz architect Nicolas Garcia Belmonte y gekauft von Sencha im Jahr 2010.

• D3.js Leistungsstarke Mehrzweck-JS-Visualisierungsbibliothek, der Nachfolger von Protovis. Siehe die Kraft-Weg-Kurve Beispiel und andere Diagrammbeispiele in der Galerie .

• Plotly's Die JS-Visualisierungsbibliothek verwendet D3.js mit JS-, Python-, R- und MATLAB-Bindungen. Siehe ein nexworkx Beispiel in IPython aquí , Beispiel für menschliche Interaktion aquí y JS Einbetten API .

• sigma.js Leichte, aber leistungsfähige Bibliothek zum Zeichnen von Graphen

• jsPlumb jQuery-Plugin zur Erstellung interaktiver verbundener Diagramme

• Federnd - ein zwangsgesteuerter Graph-Layout-Algorithmus

• Verarbeitung.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 Graphikbeispiel einer generischen Mehrzweck-Vektorzeichenbibliothek. RaphaelJS kann kein automatisches Layout von Knoten erstellen; dafür benötigen Sie eine andere Bibliothek.

• JointJS Kern - David Durman's MPL-lizensierte Open-Source-Bibliothek für Diagramme. Sie kann verwendet werden, um entweder statische Diagramme oder vollständig interaktive Diagrammwerkzeuge 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 Basisbibliothek, die in zeichnen.io .

Kommerzielle Bibliotheken

• GoJS Interaktives Zeichnen von Diagrammen und Layout-Bibliothek

• yFiles für HTML Kommerzielle Bibliothek zum Zeichnen und Layouten von Grafiken

• KeyLines Kommerzielles JS-Netzwerkvisualisierungs-Toolkit

• ZoomCharts Kommerzielle Mehrzweck-Visualisierungsbibliothek

• Syncfusion JavaScript-Diagramm 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-Diagramme. Verlassen im Sep 2013.

• arbor.js Anspruchsvolle grafische Darstellung mit netter Physik und Augenschmaus. Aufgegeben im Mai 2012. Mehrere halb-gepflegt Gabeln existieren.

• jssvggraph "Der einfachste mögliche zwangsgerichtete Graph-Layout-Algorithmus, implementiert als Javascript-Bibliothek, die SVG-Objekte verwendet". Aufgegeben im Jahr 2012.

• jsdot Client-seitige Anwendung zum Zeichnen von Grafiken. Verlassen im Jahr 2011 .

• Protovis Grafisches Toolkit für die Visualisierung (JavaScript). Ersetzt durch d3.

• Muh-Rad Interaktive JS-Darstellung für Verbindungen und Beziehungen (2008)

• JSViz Skript zur Visualisierung von Grafiken aus dem Jahr 2007

• dagre Diagramm-Layout für JavaScript

Nicht-Javascript-Bibliotheken

• Graphviz Anspruchsvolle Sprache zur Visualisierung von Graphen

  • Graphviz wurde mit Emscripten zu Javascript kompiliert aquí mit einer interaktive Online-Demo hier

• Fackel Schönes und leistungsfähiges Flash-basiertes Graphzeichnen

• NodeBox Python-Graph-Visualisierung

Answer 2

Haftungsausschluss: Ich bin ein Entwickler von Cytoscape.js

Cytoscape.js ist eine HTML5-Bibliothek zur Visualisierung von Graphen. Die API ist anspruchsvoll und folgt den jQuery-Konventionen, einschließlich

• Selektoren zur Abfrage und Filterung ( cy.elements("node[weight >= 50].someClass") tut vieles, was man erwarten würde),
• Verkettung (z.B. cy.nodes().unselect().trigger("mycustomevent") ),
• jQuery-ähnliche Funktionen für die Bindung an Ereignisse,
• Elemente als Sammlungen (wie jQuery Sammlungen von HTMLDomElements hat),
• Erweiterbarkeit (kann benutzerdefinierte Layouts, UI, Kern- und Sammlungsfunktionen usw. hinzufügen),
• und mehr.

Wenn Sie darüber nachdenken, eine ernsthafte Webapplikation mit Graphen zu erstellen, sollten Sie zumindest Cytoscape.js in Betracht ziehen. Es ist kostenlos und Open-Source:

http://js.cytoscape.org

Answer 3

JsVIS war zwar ganz nett, aber bei größeren Diagrammen langsam und wird seit 2007 nicht mehr verwendet.

vorspannen ist eine Reihe von Software-Tools zur Erstellung interaktiver Datenvisualisierungen in Java. Fackel ist eine ActionScript-Bibliothek zur Erstellung von Visualisierungen, die im Adobe Flash Player laufen, der seit 2012 eingestellt wurde.

Answer 4

In einem kommerziellen Szenario ist ein ernst zu nehmender Kandidat mit Sicherheit yFiles für HTML :

Es bietet:

• Einfach importieren von benutzerdefinierten Daten ( diese interaktive Online-Demo scheint so ziemlich genau das zu tun, wonach der Auftraggeber gesucht hat)
• Interaktive Bearbeitung zur Erstellung und Manipulation der Diagramme durch Benutzergesten (siehe die vollständige Herausgeber )
• Eine riesige Programmier-API für die individuelle Anpassung jedes einzelnen Aspekts der Bibliothek
• Unterstützung für Gruppierung y Verschachtelung (sowohl interaktiv, als auch durch die Layout-Algorithmen)
• Hängt nicht von einem bestimmten UI-Toolkit ab, sondern unterstützt Integration in fast jedes bestehende Javascript-Toolkit (siehe die "Integrations"-Demos )
• Automatisches Layout (verschiedene Stile, wie "hierarchisch", "organisch", "orthogonal", "Baum", "kreisförmig", "radial" und mehr)
• Automatisches, ausgeklügeltes Edge Routing (orthogonales und organisches Edge Routing mit Hindernisvermeidung)
• Inkrementelles und partielles Layout (Hinzufügen und Entfernen von Elementen, wobei der Rest des Diagramms nur geringfügig oder gar nicht verändert wird)
• Unterstützung für Gruppierung und Verschachtelung (sowohl interaktiv als auch durch die Layout-Algorithmen)
• Implementierungen von Algorithmen zur Graphenanalyse (Wege, Zentralitäten, Netzflüsse usw.)
• Verwendet HTML 5-Technologien wie SVG+CSS und Canvas sowie modernes Javascript, das Eigenschaften und andere ES5- und ES6-Funktionen nutzt (läuft aber aus demselben Grund nicht in IE-Versionen 8 und niedriger).
• Verwendet eine modulare API, die bei Bedarf mit UMD-Ladern geladen werden kann

Hier ist ein Rendering-Beispiel, das die meisten der gewünschten Funktionen zeigt:

Vollständige Offenlegung: Ich arbeite für yWorks, aber auf Stackoverflow repräsentiere ich nicht meinen Arbeitgeber.

Answer 5

Wie guruz erwähnte, ist die JIT verfügt über mehrere schöne Diagramm-/Baum-Layouts, darunter recht ansprechende RGraph- und HyperTree-Visualisierungen.

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