Grafikvisualisierungsbibliothek in JavaScript

Ich habe eine Datenstruktur, die ein gerichtetes Diagramm darstellt, und ich möchte diese dynamisch auf einer HTML-Seite rendern. Diese Grafiken bestehen normalerweise nur aus wenigen Knoten, vielleicht zehn am oberen Ende. Ich gehe also davon aus, dass die Leistung keine große Rolle spielen wird. Im Idealfall möchte ich es mit jQuery verbinden können, damit Benutzer das Layout manuell anpassen können, indem sie die Knoten herumziehen.

Hinweis: Ich suche keine Diagrammbibliothek.

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

Es ist JavaScript mit gerichtetem Diagrammlayout, SVG und Sie können die Knoten sogar verschieben. Muss noch etwas optimiert werden, ist aber völlig brauchbar. Mit JavaScript-Code können Sie Knoten und Kanten einfach wie folgt erstellen:

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

Ich habe die zuvor erwähnte Raphael JS-Bibliothek (das Graffle-Beispiel) sowie Code für einen erzwungenen Graph-Layout-Algorithmus verwendet, den ich im Internet gefunden habe (alles Open Source, MIT-Lizenz). Wenn Sie Anmerkungen haben oder eine bestimmte Funktion benötigen, kann ich diese implementieren. Fragen Sie einfach!

Vielleicht möchten Sie sich auch andere Projekte ansehen! Nachfolgend zwei Meta-Vergleiche:

• SocialCompare verfügt über eine umfangreiche Liste von Bibliotheken, und die Zeile "Knoten- / Kantendiagramm" filtert nach Grafiken zur Visualisierung.

• DataVisualization.ch hat viele Bibliotheken ausgewertet, einschließlich Knoten- / Diagrammbibliotheken. Leider gibt es keinen direkten Link, so dass Sie nach "Grafik" filtern müssen:

Hier ist eine Liste ähnlicher Projekte (einige wurden hier bereits erwähnt):

Reine JavaScript-Bibliotheken

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

• Cytoscape.js - interaktive Diagrammanalyse und -visualisierung mit mobiler Unterstützung gemäß den jQuery-Konventionen. Gefördert über NIH-Stipendien und entwickelt von @maxkfranz (siehe seine Antwort unten ) mit Hilfe mehrerer Universitäten und anderer Organisationen.

• Das JavaScript InfoVis Toolkit - Jit, ein interaktives, vielseitiges Framework zum Zeichnen und Layouten von Grafiken . Siehe zum Beispiel den hyperbolischen Baum . Erbaut vom Twitter-Dataviz-Architekten Nicolas Garcia Belmonte und 2010 von Sencha gekauft .

• D3.js Leistungsstarke Mehrzweck-JS-Visualisierungsbibliothek, der Nachfolger von Protovis. Siehe das Beispiel für ein kraftgerichtetes Diagramm und andere Diagrammbeispiele in der Galerie .

• Die JS-Visualisierungsbibliothek von Plotly verwendet D3.js mit JS-, Python-, R- und MATLAB-Bindungen. Sehen Sie ein nexworkx Beispiel in IPython hier , menschliche Interaktion Beispiel hier , und JS Embed API .

• sigma.js Leichte, aber leistungsstarke Bibliothek zum Zeichnen von Grafiken

• jsPlumb jQuery-Plug-In zum Erstellen interaktiver verbundener Diagramme

• Springy - ein kraftgerichteter Graph-Layout-Algorithmus

• Processing.js Javascript-Port der Processing-Bibliothek von John Resig

• JS Graph It - Drag'n'Drop-Boxen, die durch gerade Linien verbunden sind. Minimales automatisches Layout der Linien.

• RaphaelJS's Graffle - interaktives Diagrammbeispiel einer generischen Mehrzweck-Vektorzeichnungsbibliothek. RaphaelJS kann Knoten nicht automatisch gestalten. Dafür benötigen Sie eine weitere Bibliothek.

• JointJS Core - David Durmans MPL-lizenzierte Open Source-Diagrammbibliothek. Es kann verwendet werden, um entweder statische Diagramme oder vollständig interaktive Diagrammtools und Anwendungsersteller zu erstellen. Funktioniert in Browsern, die SVG unterstützen. Layoutalgorithmen, die nicht im Kernpaket enthalten sind

• mxGraph Früher kommerzielle HTML 5-Diagrammbibliothek, jetzt verfügbar unter Apache v2.0. mxGraph ist die in draw.io verwendete Basisbibliothek .

Kommerzielle Bibliotheken

• GoJS Interaktive Grafikzeichnung und Layoutbibliothek

• yFiles for HTML Kommerzielle Grafikzeichnung und Layoutbibliothek

• KeyLines Kommerzielles JS-Netzwerkvisualisierungs-Toolkit

• ZoomCharts Kommerzielle Mehrzweck-Visualisierungsbibliothek

• Syncfusion JavaScript Diagram Kommerzielle Diagrammbibliothek zum Zeichnen und Visualisieren.

Verlassene Bibliotheken

• Cytoscape Web Embeddable JS Network Viewer (keine neuen Funktionen geplant; Nachfolger von Cytoscape.js)

• Canviz JS- Renderer für Graphviz-Diagramme. Im September 2013 aufgegeben .

• arbor.js Anspruchsvolle Grafik mit guter Physik und Augenweide. Im Mai 2012 aufgegeben. Es gibt mehrere halb gewartete Gabeln.

• jssvggraph "Der einfachste erzwungene Graph-Layout-Algorithmus, der als Javascript-Bibliothek implementiert ist und SVG-Objekte verwendet." Im Jahr 2012 aufgegeben.

• jsdot Client-seitige Anwendung zum Zeichnen von Graphen. Im Jahr 2011 aufgegeben .

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

• Moo Wheel Interactive JS-Darstellung für Verbindungen und Beziehungen (2008)

• Grafikvisualisierungsskript für JSViz 2007

• dagre Graph Layout für JavaScript

Nicht-Javascript-Bibliotheken

• Graphviz Anspruchsvolle Grafikvisualisierungssprache

  • Graphviz wurde mit Emscripten hier mit einer interaktiven Online-Demo zu Javascript kompiliert

• Flare Schöne und leistungsstarke Flash-basierte Grafikzeichnung

• NodeBox Python Graph Visualisierung

Haftungsausschluss: Ich bin Entwickler von Cytoscape.js

Cytoscape.js ist eine HTML5-Grafikvisualisierungsbibliothek. Die API ist hochentwickelt und folgt den jQuery-Konventionen, einschließlich

• Selektoren zum Abfragen und Filtern ( cy.elements("node[weight >= 50].someClass")macht viel, wie Sie es erwarten würden),
• Verkettung (zB cy.nodes().unselect().trigger("mycustomevent")),
• jQuery-ähnliche Funktionen zum Binden an Ereignisse,
• Elemente als Sammlungen (wie jQuery hat Sammlungen von HTMLDomElements),
• Erweiterbarkeit (kann benutzerdefinierte Layouts, Benutzeroberfläche, Kern- und Erfassungsfunktionen usw. hinzufügen),
• und mehr.

Wenn Sie darüber nachdenken, eine seriöse Webanwendung mit Grafiken zu erstellen, sollten Sie zumindest Cytoscape.js in Betracht ziehen. Es ist kostenlos und Open Source:

http://js.cytoscape.org

JsVIS war ziemlich nett, aber langsam mit größeren Grafiken und wurde seit 2007 aufgegeben.

prefuse ist eine Reihe von Softwaretools zum Erstellen umfangreicher interaktiver Datenvisualisierungen in Java. flare ist eine ActionScript-Bibliothek zum Erstellen von Visualisierungen, die im Adobe Flash Player ausgeführt werden und seit 2012 nicht mehr verfügbar sind.

In einem kommerziellen Szenario ist yFiles for HTML mit Sicherheit ein ernstzunehmender Kandidat :

Es bietet:

• Einfacher Import von benutzerdefinierten Daten ( diese interaktive Online-Demo scheint genau das zu tun, wonach das OP gesucht hat)
• Interaktive Bearbeitung zum Erstellen und Bearbeiten der Diagramme durch Benutzergesten (siehe vollständigen Editor )
• Eine riesige Programmier-API zum Anpassen jedes einzelnen Aspekts der Bibliothek
• Unterstützung für Gruppierung und Verschachtelung (sowohl interaktiv als auch über die Layout-Algorithmen)
• Hängt nicht von einem speziellen UI-Toolkit ab, unterstützt jedoch die Integration in fast jedes vorhandene Javascript-Toolkit (siehe Demos zur "Integration" ).
• Automatisches Layout (verschiedene Stile wie "hierarchisch", "organisch", "orthogonal", "Baum", "kreisförmig", "radial" und mehr)
• Automatische anspruchsvolle Kantenführung (orthogonale und organische Kantenführung mit Hindernisvermeidung)
• Inkrementelles und teilweises Layout (Hinzufügen und Entfernen von Elementen und nur geringfügige oder gar keine Änderung des restlichen Diagramms)
• Unterstützung für Gruppierung und Verschachtelung (sowohl interaktiv als auch über die Layout-Algorithmen)
• Implementierung von Graphanalysealgorithmen (Pfade, Zentralitäten, Netzwerkflüsse usw.)
• Verwendet HTML 5-Technologien wie SVG + CSS und Canvas sowie moderne Javascript-Eigenschaften und andere weitere ES5- und ES6-Funktionen (wird jedoch aus demselben Grund nicht in IE-Versionen 8 und niedriger ausgeführt).
• Verwendet eine modulare API, die bei Bedarf mit UMD-Ladern geladen werden kann

Hier ist ein Beispiel-Rendering, das die meisten der angeforderten Funktionen zeigt:

Vollständige Offenlegung: Ich arbeite für yWorks, aber bei Stackoverflow vertrete ich meinen Arbeitgeber nicht.

Wie Guruz erwähnte, verfügt die JIT über mehrere schöne Grafik- / Baumlayouts, einschließlich sehr ansprechender RGraph- und HyperTree-Visualisierungen.

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