Grafikvisualisierungsbibliothek in JavaScript

523

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.

Chris Farmer
quelle
Schauen Sie sich diese Frage an: stackoverflow.com/questions/8308516/multigraphs-with-javascript
Linker

Antworten:

923

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:Auswahl 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- / 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

Verlassene Bibliotheken

Nicht-Javascript-Bibliotheken

  • Graphviz Anspruchsvolle Grafikvisualisierungssprache

  • Flare Schöne und leistungsstarke Flash-basierte Grafikzeichnung

  • NodeBox Python Graph Visualisierung

Dan Dascalescu
quelle
4
Ja, gerichtete Kanten sind möglich! Verwenden Sie g.addEdge ("Kirsche", "Apfel", {"gerichtet": wahr});
Johann Philipp Strathausen
müssen auch die Bibliothek chart.js & chartnew.js hinzufügen. und dies ( charts.livegap.com ) wird dafür generiert
Omar Sedki
1
Es gibt zwei weitere bemerkenswerte Bibliotheken, die der Liste hinzugefügt werden können, nämlich Linkuroius.js und VivaGraphJS .
Łukasz K
2
Gibt es eine Open Source-Alternative für den yFILES-Layoutalgorithmus? Wie yworks.com/products/yfiles-layout-algorithms-for-cytoscape
Ryan Chou
1
Ich habe eine kostenlose und leichte Bibliothek erstellt, die für andere nützlich sein kann: github.com/n-yousefi/Arg-Graph
Naser Yousefi
48

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

maxkfranz
quelle
6
Alle APIs sind vollständig dokumentiert. Die Dokumente führen Sie sogar durch die ersten Schritte (z. B. init). Es gibt auch Beispiele für die einzelnen APIs und Live-Demos. Die Funktionalität liegt weit über jeder JS-Grafikbibliothek und die Dokumente sind umfangreicher als die meisten Projekte - ob kommerziell oder OpenSource. Was genau fehlt Ihnen in den Dokumenten?
Maxkfranz
3
Ok, tut mir leid mein schlechtes. Ich habe nicht richtig ausgesehen. Ja, es ist gut dokumentiert.
Sturm
Hat es eine Möglichkeit, Diagramme in einer hierarchischen Reihenfolge zu gestalten (ein Layout, das wie ein Baum aussieht, aber tatsächlich ein Diagramm ist, was bedeutet, dass es Knoten mit mehreren Eltern gibt)
Mina
Sowohl das Dagre als auch das breiteste Layout funktionieren für diesen Fall
maxkfranz
Ich muss das Diagramm mit Drag'n'Drop von Pfeilen bearbeiten, die mit den Enden beginnen und enden. Diese Bibliothek sagt, dass diese Dinge unveränderlich sind. Also muss ich nach einer anderen Bibliothek suchen ...
Eugene Gr. Philippov
35

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.

Sam C.
quelle
2
Diese Bibliotheken scheinen zu diesem Zeitpunkt etwas alt zu sein. Was nutzen die Leute heute? Ich beschäftige mich speziell mit dem Plotten unabhängiger xy-Serien.
Blong
22
-1 - Prefuse ist Java, nicht JavaScript. Flare ist Flash, auch kein JavaScript. JsVIS ist fehlerhaft und veraltet.
Anatoly Techtonik
2
@animuson: Ein weiteres Off-Topic: OP hat nach JavaScript-Bibliotheken gefragt. Der einzige Teil über JS in der Antwort ist eine Bibliothek, die seit 2007 nicht mehr entwickelt wurde.
Dan Dascalescu
10

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:

Screenshot eines von der BPMN-Demo erstellten Beispiel-Renderings.

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

Sebastian
quelle
3
Die beste Sammlung von Algorithmen, aber auch die geschlossenste, was die Verwendung in Open-Source-Projekten unmöglich
macht
1
"Beste Sammlung" ist wahrscheinlich wahr, aber "am meisten geschlossen" ist relativ und "unmöglich" ist falsch: Es handelt sich um eine kommerzielle Lizenz. Wenn das Open-Source-Projekt keine virale Lizenz verwendet , kann es in Open-Source-Projekten verwendet werden. Natürlich Open-Source - Projekte in anderen Open-Source - Projekten mit ist weniger problematisch ...
Sebastian
1
Sie scheinen nicht zu verstehen, wie Open Source funktioniert. Wollen Sie damit sagen, dass Ihr Unternehmen einem Open-Source-Projekt das Recht einräumen kann, diese Software für unendliche Entwickler zu verwenden, das Recht, sie zu festen, einmaligen Kosten an unendliche Entwickler, Mitwirkende und Tester zu verteilen? Natürlich nicht .
Félix Saparelli
2
@ FélixSaparelli: Glaub mir: Das tue ich. Was Sie beschreiben, ist möglich und ähnliche Dinge wurden bereits zuvor getan. Sie verlinken auf die Standardlizenzbedingungen, aber natürlich sind benutzerdefinierte Vereinbarungen möglich und wurden bereits zuvor getroffen. Dies ist jedoch nicht der richtige Ort, um darüber zu diskutieren. Wenden Sie sich direkt an yWorks.
Sebastian
7

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.

Jack Rusher
quelle