Biblioteka wizualizacji wykresów w JavaScript

523

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.

Chris Farmer
źródło

Odpowiedzi:

922

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”:Selection DataVisualization.ch

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

Dan Dascalescu
źródło
4
Tak, skierowane krawędzie są możliwe! Użyj g.addEdge („cherry”, „apple”, {„direct”: true});
Johann Philipp Strathausen,
trzeba również dodać bibliotekę chart.js i chartnew.js. i to ( charts.livegap.com ) jest generowane dla niego
Omar Sedki
1
Istnieją dwie inne godne uwagi biblioteki, które można dodać do listy, a mianowicie Linkuroius.js i VivaGraphJS .
Łukasz K
2
Czy istnieje jakaś alternatywa typu open source dla algorytmu układu yFILES? Takich jak yworks.com/products/yfiles-layout-algorithms-for-cytoscape
Ryan Chou
1
Stworzyłem darmową i lekką bibliotekę, która może być przydatna dla innych: github.com/n-yousefi/Arg-Graph
Naser Yousefi
48

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

maxkfranz
źródło
6
Wszystkie interfejsy API są w pełni udokumentowane. Dokumenty nawet przeprowadzają Cię przez proces rozpoczęcia (tj. Init). Istnieją również uruchomione przykłady dla poszczególnych interfejsów API i dostępne są dema na żywo. Funkcjonalność jest znacznie wyższa niż jakakolwiek biblioteka grafów JS, a dokumenty są bardziej rozbudowane niż większość projektów - komercyjnych lub open source. Czego dokładnie brakuje ci w dokumentacji?
maxkfranz
3
Ok, przepraszam za złe. Nie wygladalam prawidlowo Tak, jest dobrze udokumentowane.
Storm
Czy ma sposób na układanie wykresów w kolejności hierarchicznej (układ, który wygląda jak drzewo, ale w rzeczywistości jest to wykres, co oznacza, że ​​istnieją węzły z wieloma rodzicami)
Mina
W tym przypadku działa zarówno sztylet, jak i pierwszy układ
maxkfranz
Muszę edytować wykres za pomocą przeciągania i upuszczania strzałek początku i końca. Ta biblioteka mówi, że te rzeczy są niezmienne. Muszę więc poszukać innej biblioteki ...
Eugene Gr. Philippov
35

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.

Sam C.
źródło
2
Te biblioteki wydają się w tym momencie trochę stare, z czego ludzie korzystają obecnie? W szczególności zastanawiam się nad stworzeniem niezależnej serii xy.
blong
22
-1 - prefuse to Java, a nie JavaScript. Flare to Flash, również nie JavaScript. JsVIS jest wadliwy i nieaktualny.
anatoly techtonik
2
@animuson: inny nie na temat: OP poprosił o biblioteki JavaScript. Jedyną częścią dotyczącą JS w odpowiedzi jest biblioteka, która nie została opracowana od 2007 roku.
Dan Dascalescu,
10

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:

Zrzut ekranu przykładowego renderowania utworzonego przez demo BPMN.

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

Sebastian
źródło
3
Najlepszy zbiór algorytmów, ale także najbardziej zamknięty, uniemożliwiający użycie w projektach open source :-(
forresto
1
„Najlepsza kolekcja” jest prawdopodobnie prawdą, ale „najbardziej zamknięta” jest względna, a „niemożliwa” jest niepoprawna: jest to licencja komercyjna, więc jeśli projekt open source nie korzysta z licencji wirusowej , może być stosowany w projektach open source. Oczywiście korzystanie z projektów typu open source w innych projektach typu open source jest mniej problematyczne ...
Sebastian,
1
Wygląda na to, że nie rozumiesz, jak działa open source. Czy twierdzisz, że Twoja firma może przyznać projektowi typu open source prawo do używania tego oprogramowania dla nieskończonych programistów, prawo do rozpowszechniania go wśród nieskończonych programistów, współpracowników i testerów, za ustalony, jednorazowy koszt? Oczywiście że nie .
Félix Saparelli
2
@ FélixSaparelli: Uwierz mi: tak. To, co opisujesz, jest możliwe i podobne rzeczy zostały już zrobione wcześniej. Łączymy się ze standardowymi warunkami licencji, ale oczywiście możliwe są umowy niestandardowe, które zostały wcześniej zawarte. Nie jest to jednak odpowiednie miejsce do dyskusji na ten temat. Skontaktuj się bezpośrednio z yWorks.
Sebastian
7

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.

Jack Rusher
źródło