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.
javascript
jquery
data-structures
graph-layout
Chris Farmer
źródło
źródło
Odpowiedzi:
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:
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
Flare Piękny i wydajny rysunek graficzny oparty na technologii Flash
Wizualizacja NodeBox Python Graph
źródło
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
cy.elements("node[weight >= 50].someClass")
robi tyle, ile można się spodziewać),cy.nodes().unselect().trigger("mycustomevent")
),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
źródło
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.
źródło
W scenariuszu komercyjnym poważnym konkurentem są z pewnością yFiles dla HTML :
Oferuje:
Oto przykładowe renderowanie, które pokazuje większość wymaganych funkcji:
Pełne ujawnienie: pracuję dla yWorks, ale w Stackoverflow nie reprezentuję mojego pracodawcy.
źródło
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.
źródło