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.
javascript
jquery
data-structures
graph-layout
Chris Farmer
quelle
quelle
Antworten:
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:
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
Flare Schöne und leistungsstarke Flash-basierte Grafikzeichnung
NodeBox Python Graph Visualisierung
quelle
Haftungsausschluss: Ich bin Entwickler von Cytoscape.js
Cytoscape.js ist eine HTML5-Grafikvisualisierungsbibliothek. Die API ist hochentwickelt und folgt den jQuery-Konventionen, einschließlich
cy.elements("node[weight >= 50].someClass")
macht viel, wie Sie es erwarten würden),cy.nodes().unselect().trigger("mycustomevent")
),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
quelle
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.
quelle
In einem kommerziellen Szenario ist yFiles for HTML mit Sicherheit ein ernstzunehmender Kandidat :
Es bietet:
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.
quelle
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.
quelle