Diagrammvisualisierungsbibliothek in JavaScript

StackOverflow https://stackoverflow.com/questions/7034

Frage

Ich habe eine Datenstruktur, die einen gerichteten Graphen darstellt, und ich möchte diese dynamisch auf einer HTML-Seite rendern.Bei diesen Diagrammen handelt es sich in der Regel nur um wenige Knoten, am oberen Ende vielleicht um zehn. Daher gehe ich davon aus, dass die Leistung keine große Rolle spielen wird.Idealerweise würde ich es gerne mit jQuery verbinden können, damit Benutzer das Layout manuell anpassen können, indem sie die Knoten verschieben.

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

War es hilfreich?

Lösung

Ich habe gerade zusammengestellt, was Sie möglicherweise suchen: http://www.graphdracula.net

Es handelt sich um JavaScript mit gerichtetem Diagrammlayout, SVG und Sie können die Knoten sogar verschieben.Muss noch etwas optimiert werden, ist aber durchaus brauchbar.Knoten und Kanten erstellen Sie ganz 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 zuvor erwähnte Raphael JS-Bibliothek (das Graffle-Beispiel) sowie etwas Code für einen kraftbasierten Diagrammlayout-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 gerne implementieren, fragen Sie einfach!

Vielleicht möchten Sie auch einen Blick auf andere Projekte werfen!Nachfolgend finden Sie zwei Metavergleiche:

  • SocialCompare verfügt über eine umfangreiche Liste von Bibliotheken und die Zeile „Knoten-/Kantendiagramm“ filtert nach Diagrammvisualisierungsbibliotheken.

  • DataVisualization.ch hat viele Bibliotheken evaluiert, darunter auch Node/Graph-Bibliotheken.Leider gibt es keinen direkten Link, daher müssen Sie nach „Grafik“ filtern:Selection DataVisualization.ch

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

Reine JavaScript-Bibliotheken

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

  • Cytoscape.js - Interaktive Diagrammanalyse und Visualisierung mit mobiler Unterstützung gemäß jQuery-Konventionen.Gefördert durch NIH-Zuschüsse und entwickelt von @maxkfranz (sehen seine Antwort unten) mit Unterstützung mehrerer Universitäten und anderer Organisationen.

  • Das JavaScript InfoVis Toolkit - Jit, ein interaktives, vielseitiges Framework zum Zeichnen und Layouten von Diagrammen.Siehe zum Beispiel die Hyperbolischer Baum.Gebaut vom Twitter-Dataviz-Architekten Nicolas Garcia Belmonte Und von Sencha gekauft in 2010.

  • D3.js Leistungsstarke, vielseitige JS-Visualisierungsbibliothek, der Nachfolger von Protovis.Siehe die kraftgerichteter Graph Beispiel und andere Diagrammbeispiele im Galerie.

  • Plotlys Die JS-Visualisierungsbibliothek verwendet D3.js mit JS-, Python-, R- und MATLAB-Bindungen.Sehen Sie sich ein Nexworkx-Beispiel in IPython an Hier, Beispiel menschlicher Interaktion Hier, Und JS-Einbettungs-API.

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

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

  • Federnd - ein kraftgesteuerter 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 automatisches Layout der Linien.

  • Graffle von RaphaelJS - interaktives Diagrammbeispiel einer generischen Mehrzweck-Vektorzeichnungsbibliothek.RaphaelJS kann Knoten nicht automatisch anordnen;Dafür benötigen Sie eine andere Bibliothek.

  • JointJS-Kern - David Durmans MPL-lizenzierte Open-Source-Diagrammbibliothek.Es kann zum Erstellen statischer Diagramme oder vollständig interaktiver Diagrammtools und Anwendungsersteller verwendet werden.Funktioniert in Browsern, die SVG unterstützen.Layout-Algorithmen sind nicht im Kernpaket enthalten

  • mxGraph Zuvor kommerzielle HTML 5-Diagrammbibliothek, jetzt verfügbar unter Apache v2.0.mxGraph ist die Basisbibliothek, die in verwendet wird draw.io.

Kommerzielle Bibliotheken

Verlassene Bibliotheken

  • Cytoscape Web Einbettbarer JS-Netzwerk-Viewer (keine neuen Funktionen geplant;Nachfolger von Cytoscape.js)

  • Canviz JS Renderer für Graphviz-Graphen. Verlassen im September 2013.

  • arbor.js Anspruchsvolle Grafik mit schöner Physik und Augenschmaus.Im Mai 2012 aufgegeben.Mehrere halbgepflegt Gabeln existieren.

  • jssvggraph „Der einfachste mögliche erzwungene Graph-Layout-Algorithmus, implementiert als Javascript-Bibliothek, die SVG-Objekte verwendet.“Im Jahr 2012 aufgegeben.

  • jsdot Clientseitige Anwendung zum Zeichnen von Diagrammen. 2011 aufgegeben.

  • Protovis Grafisches Toolkit zur Visualisierung (JavaScript).Ersetzt durch d3.

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

  • JSViz Diagrammvisualisierungsskript aus dem Jahr 2007

  • dagre Diagrammlayout für JavaScript

Nicht-Javascript-Bibliotheken

Andere Tipps

Haftungsausschluss:Ich bin Entwickler von Cytoscape.js

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

  • Selektoren zum Abfragen und Filtern (cy.elements("node[weight >= 50].someClass") macht viel, was Sie erwarten würden),
  • Verkettung (z.B. cy.nodes().unselect().trigger("mycustomevent")),
  • jQuery-ähnliche Funktionen zur Bindung an Ereignisse,
  • Elemente als Sammlungen (wie jQuery Sammlungen von HTMLDomElements hat),
  • Erweiterbarkeit (kann benutzerdefinierte Layouts, Benutzeroberflächen, Kern- und Sammlungsfunktionen 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 Diagrammen und wurde seit 2007 aufgegeben.

Vorsicherung ist eine Reihe von Softwaretools zum Erstellen umfangreicher interaktiver Datenvisualisierungen in Java. Fackel ist eine ActionScript-Bibliothek zum Erstellen von Visualisierungen, die im Adobe Flash Player laufen, seit 2012 aufgegeben.

In einem kommerziellen Szenario ist es mit Sicherheit ein ernsthafter Kandidat yFiles für HTML:

Es bietet:

  • Einfach importieren von benutzerdefinierten Daten (diese interaktive Online-Demo scheint ziemlich genau das zu tun, wonach der OP gesucht hat)
  • Interaktive Bearbeitung zum Erstellen und Bearbeiten der Diagramme durch Benutzergesten (siehe die vollständige Editor)
  • Ein riesiges Programmier-API zum Anpassen jedes einzelnen Aspekts der Bibliothek
  • Unterstützung für Gruppierung Und nisten (sowohl interaktiv, als auch durch die Layout-Algorithmen)
  • Hängt nicht von einem bestimmten UI-Toolkit ab, unterstützt aber Integration in fast jedes vorhandene Javascript-Toolkit (siehe „Integrations“-Demos)
  • Automatisches Layout (verschiedene Stile, wie „hierarchisch“, „organisch“, „orthogonal“, „Baum“, „kreisförmig“, „radial“ und mehr)
  • Automatisches anspruchsvolles Kantenrouting (orthogonales und organisches Kantenrouting mit Hindernisvermeidung)
  • Inkrementelles und teilweises Layout (Hinzufügen und Entfernen von Elementen und nur geringfügige oder gar keine Änderung des Rests des Diagramms)
  • Unterstützung für Gruppierung und Verschachtelung (sowohl interaktiv als auch über die Layout-Algorithmen)
  • Implementierungen von Algorithmen zur Graphenanalyse (Pfade, Zentralitäten, Netzwerkflüsse usw.)
  • Verwendet HTML 5-Technologien wie SVG+CSS und Canvas sowie moderne Javascript-Nutzungseigenschaften und weitere ES5- und ES6-Funktionen (läuft aber aus dem gleichen Grund nicht in IE-Versionen 8 und niedriger).
  • Verwendet eine modulare API, die bei Bedarf mit UMD-Loadern geladen werden kann

Hier ist ein Beispielrendering, das die meisten der angeforderten Funktionen zeigt:

Screenshot of a sample rendering created by the BPMN demo.

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

Wie Guruz erwähnte, ist das JIT verfügt über mehrere schöne Diagramm-/Baumlayouts, darunter recht ansprechende RGraph- und HyperTree-Visualisierungen.

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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top