Biblioteka wizualizacji wykresów w JavaScript

Mam strukturę danych, która reprezentuje ukierunkowany wykres, i chcę to renderować dynamicznie na stronie HTML. Te wykresy zwykle będą miały tylko kilka węzłów, może dziesięć na samym górnym końcu, więc sądzę, że wydajność nie będzie wielkim problemem. Idealnie, chciałbym móc podłączyć go za pomocą jQuery, aby użytkownicy mogli ręcznie modyfikować układ, przeciągając węzły.

Uwaga: nie szukam biblioteki wykresów.

Właśnie zestawiłem to, czego możesz szukać: http://www.graphdracula.net

Jest JavaScript z ukierunkowanym układem grafów, SVG i możesz nawet przeciągać węzły. Nadal wymaga drobnych poprawek, ale jest całkowicie użyteczny. Łatwo tworzysz węzły i krawędzie za pomocą kodu JavaScript takiego:

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

Użyłem wcześniej wspomnianej biblioteki Raphael JS (przykład graffle) oraz trochę kodu dla algorytmu układu grafów opartego na sile, który znalazłem w sieci (wszystko open source, licencja MIT). Jeśli masz jakieś uwagi lub potrzebujesz określonej funkcji, mogę ją zaimplementować, po prostu zapytaj!

Możesz także przyjrzeć się innym projektom! Poniżej znajdują się dwa meta-porównania:

• SocialCompare ma obszerną listę bibliotek, a linia „Wykres węzła / krawędzi” będzie filtrować w poszukiwaniu wizualizacji wykresu.

• DataVisualization.ch ocenił wiele bibliotek, w tym biblioteki węzłów / grafów. Niestety nie ma bezpośredniego linku, więc będziesz musiał odfiltrować „wykres”:

Oto lista podobnych projektów (niektóre już tu wspomniano):

Biblioteki czystego JavaScript

• vis.js obsługuje wiele rodzajów wykresów sieciowych / krawędziowych, a także osie czasu i wykresy 2D / 3D. Auto-układ, auto-klastrowanie, sprężysty silnik fizyki, przyjazny dla urządzeń mobilnych, nawigacja za pomocą klawiatury, układ hierarchiczny, animacja itp. MIT na licencji i opracowany przez holenderską firmę specjalizującą się w badaniach sieci samoorganizujących się.

• Cytoscape.js - interaktywna analiza i wizualizacja wykresów z obsługą urządzeń mobilnych, zgodnie z konwencjami jQuery. Finansowany z grantów NIH i opracowany przez @maxkfranz (patrz jego odpowiedź poniżej ) z pomocą kilku uniwersytetów i innych organizacji.

• JavaScript InfoVis Toolkit - Jit, interaktywny, wielozadaniowy schemat do rysowania i tworzenia układów. Zobacz na przykład drzewo hiperboliczne . Zbudowany przez Nicolasa Garcię Belmonte, architekta bazy danych Twittera i zakupiony przez Sencha w 2010 roku.

• D3.js Potężna wielofunkcyjna biblioteka wizualizacji JS, następca Protovis. Zobacz przykładowy wykres wymuszony i inne przykłady wykresów w galerii .

• Biblioteka wizualizacji JS firmy Plotly używa D3.js z powiązaniami JS, Python, R i MATLAB. Zobacz przykład nexworkx w IPython tutaj , przykład interakcji człowieka tutaj i JS Embed API .

• sigma.js Lekka, ale potężna biblioteka do rysowania wykresów

• jsPlumb wtyczka jQuery do tworzenia interaktywnych połączonych wykresów

• Springy - algorytm układu graficznego ukierunkowany siłą

• Processing.js Port JavaScript biblioteki Processing autorstwa Johna Resiga

• JS Graph It - przeciągnij i upuść pola połączone prostymi liniami. Minimalny automatyczny układ linii.

• Graffle autorstwa RaphaelJS - interaktywny przykład graficznej ogólnej uniwersalnej biblioteki rysunków wektorowych. RaphaelJS nie może automatycznie układać węzłów; potrzebujesz do tego innej biblioteki.

• JointJS Core - biblioteka diagramów otwartego oprogramowania Davida Durmana na licencji MPL. Można go używać do tworzenia diagramów statycznych lub w pełni interaktywnych narzędzi do tworzenia diagramów i konstruktorów aplikacji. Działa w przeglądarkach obsługujących SVG. Algorytmy układu nie zawarte w pakiecie podstawowym

• mxGraph Wcześniej komercyjna biblioteka diagramów HTML 5, teraz dostępna pod Apache v2.0. mxGraph jest biblioteka zasada stosowana w draw.io .

Biblioteki komercyjne

• GoJS Interaktywna biblioteka rysunków i układów graficznych

• yFiles dla HTML Komercyjne rysowanie wykresów i bibliotekę układów

• KeyLines Komercyjny zestaw narzędzi do wizualizacji sieci JS

• ZoomCharts Komercyjna, wielofunkcyjna biblioteka wizualizacji

• Syncfusion JavaScript Diagram Komercyjna biblioteka diagramów do rysowania i wizualizacji.

Opuszczone biblioteki

• Cytoscape Web Embeddable JS Network viewer (nie planowano żadnych nowych funkcji; sukces: Cytoscape.js)

• Moduł renderujący Canviz JS dla grafów Graphviz. Porzucony we wrześniu 2013 r.

• arbor.js Wyrafinowane tworzenie grafiki z ładną fizyką i atrakcyjnymi dla oka. Porzucono w maju 2012 r. Istnieje kilka częściowo konserwowanych widelców.

• jssvggraph „Najprostszy możliwy algorytm układu grafów z ukierunkowanym wymuszeniem zaimplementowany jako biblioteka JavaScript, która wykorzystuje obiekty SVG”. Porzucony w 2012 r.

• jsdot Aplikacja do rysowania wykresów po stronie klienta. Porzucony w 2011 r .

• Graficzny zestaw narzędzi Protovis do wizualizacji (JavaScript). Zastąpiony przez d3.

• Moo Wheel Interactive reprezentacja JS dla połączeń i relacji (2008)

• Skrypt wizualizacji wykresów z JSViz 2007

• dagre Układ graficzny dla JavaScript

Biblioteki inne niż Javascript

• Graphviz Wyrafinowany język wizualizacji wykresów

  • Graphviz został skompilowany do Javascript przy użyciu Emscripten tutaj z interaktywnym demo online tutaj

• Flare Piękny i wydajny rysunek graficzny oparty na technologii Flash

• Wizualizacja NodeBox Python Graph

Oświadczenie: Jestem programistą Cytoscape.js

Cytoscape.js to biblioteka wizualizacji grafów HTML5. Interfejs API jest zaawansowany i jest zgodny z konwencjami jQuery, w tym

• selektory do zapytań i filtrowania ( cy.elements("node[weight >= 50].someClass")robi tyle, ile można się spodziewać),
• łańcuch (np. cy.nodes().unselect().trigger("mycustomevent")),
• Funkcje jQuery do wiązania ze zdarzeniami,
• elementy jako kolekcje (jak jQuery ma kolekcje HTMLDomElements),
• rozszerzalność (można dodawać niestandardowe układy, interfejs użytkownika, funkcje podstawowe i kolekcjonerskie itp.),
• i więcej.

Jeśli myślisz o zbudowaniu poważnej aplikacji internetowej z wykresami, powinieneś przynajmniej rozważyć Cytoscape.js. Jest darmowy i open-source:

http://js.cytoscape.org

JsVIS był całkiem fajny, ale powolny z większymi wykresami i został porzucony od 2007 roku.

prefuse to zestaw narzędzi programowych do tworzenia bogatych interaktywnych wizualizacji danych w Javie. flare to biblioteka ActionScript do tworzenia wizualizacji uruchamianych w programie Adobe Flash Player, porzucona od 2012 roku.

W scenariuszu komercyjnym poważnym konkurentem są z pewnością yFiles dla HTML :

Oferuje:

• Łatwy import niestandardowych danych ( to interaktywne demo online wydaje się robić dokładnie to, czego szukał OP)
• Interaktywna edycja do tworzenia diagramów i manipulowania nimi za pomocą gestów użytkownika (patrz pełny edytor )
• Ogromny programistyczny interfejs API do dostosowywania każdego aspektu biblioteki
• Wsparcie dla grupowania i zagnieżdżania (zarówno interaktywnych, jak i za pomocą algorytmów układu)
• Nie zależy od konkretnego zestawu narzędzi interfejsu użytkownika, ale obsługuje integrację z prawie każdym istniejącym zestawem narzędzi Javascript (zobacz dema „integracji” )
• Automatyczny układ (różne style, takie jak „hierarchiczny”, „organiczny”, „ortogonalny”, „drzewo”, „okrągły”, „promieniowy” i inne)
• Automatyczne wyrafinowane prowadzenie krawędzi (ortogonalne i organiczne prowadzenie krawędzi z unikaniem przeszkód)
• Układ przyrostowy i częściowy (dodawanie i usuwanie elementów i tylko nieznacznie lub wcale zmiana pozostałych schematów)
• Obsługa grupowania i zagnieżdżania (zarówno interaktywnych, jak i za pomocą algorytmów układu)
• Implementacje algorytmów analizy grafów (ścieżki, centralności, przepływy sieciowe itp.)
• Wykorzystuje technologie HTML 5, takie jak SVG + CSS i Canvas, a także nowoczesne właściwości dźwigni Javascript oraz inne dodatkowe funkcje ES5 i ES6 (ale z tego samego powodu nie będą działać w IE 8 i niższych).
• Wykorzystuje modułowy interfejs API, który można ładować na żądanie przy użyciu programów ładujących UMD

Oto przykładowe renderowanie, które pokazuje większość wymaganych funkcji:

Pełne ujawnienie: pracuję dla yWorks, ale w Stackoverflow nie reprezentuję mojego pracodawcy.

Jak wspomniał Guruz, JIT ma kilka ładnych układów grafów / drzew, w tym całkiem atrakcyjne wizualizacje RGraph i HyperTree.

Dodałem też bardzo prostą implementację opartą na SVG w github (bez zależności, ~ 125 LOC), która powinna działać wystarczająco dobrze dla małych wykresów wyświetlanych w nowoczesnych przeglądarkach.