Grafinė vizualizacijos biblioteka „JavaScript“

Turiu duomenų struktūrą, kuri atspindi nukreiptą grafiką, ir noriu ją dinamiškai rodyti HTML puslapyje. Šie grafikai paprastai yra tik keli mazgai, galbūt dešimt aukščiausio galo, todėl manau, kad spektaklis nebus didelis. Idealiu atveju norėčiau jį prijungti naudojant jQuery, kad vartotojai galėtų pritaikyti išdėstymą rankiniu būdu, vilkdami mazgus aplink.

Pastaba Aš nerandu grafinės bibliotekos.

526
10 авг. nustatė Chris Farmer 10 rug. 2008-08-10 07:07 '08, 07:07, 2008-08-10 07:07
@ 5 atsakymai

Aš tiesiog surinko tai, ką galite ieškoti: http://www.graphdracula.net

Tai „JavaScript“ su grafiniu grafiniu išdėstymu, SVG ir netgi galite nuvilkti mazgus. Vis dar reikia šiek tiek truputį, bet visiškai tinkamų naudoti. Naudodami „JavaScript“ kodą galite lengvai sukurti mazgus ir briaunas, pavyzdžiui:

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

Naudojau anksčiau minėtą Raphael JS biblioteką (pvz., Graffle), taip pat kodą galios grafiko konstrukcijos algoritmui, kurį rado tinkle (visi atviro kodo, MIT licencijos). Jei turite kokių nors pastabų ar reikia tam tikros funkcijos, galiu ją įgyvendinti, tiesiog paklausti!


Galite pažvelgti į kitus projektus! Toliau pateikiami du meta-palyginimai:

  • „SocialCompare“ turi platų bibliotekų sąrašą, o eilutė „Mazgas / krašto grafikas“ filtruos grafiką.

  • DataVisualization.ch įvertino daugelį bibliotekų, įskaitant mazgus / grafiką. Deja, nėra tiesioginio ryšio, todėl turėsite filtruoti „grafika“: 2019

Atsakomybės apribojimas: esu Cytoscape.js kūrėjas

Cytoscape.js yra HTML5 grafikos vizualizacijos biblioteka. API yra sudėtinga ir atitinka jQuery konvencijas, įskaitant

  • Selektorius
  • užklausoms ir filtravimui („ cy.elements("node[weight >= 50].someClass") , kaip tikėtasi, daro daug,
  • grandinė (pvz., cy.nodes().unselect().trigger("mycustomevent") ),
  • „jQuery“ panašios funkcijos, susijusios su įvykiais,
  • elementai kaip kolekcijos (pavyzdžiui, jQuery turi HTMLDomElements kolekcijas),
  • išplėtimas (gali pridėti pasirinktinius išdėstymus, vartotojo sąsają, branduolio funkcijas ir kolekcijas ir tt),
  • ir dar daugiau.

Jei ketinate sukurti rimtą žiniatinklio įrašą su grafikais, turėtumėte apsvarstyti bent Cytoscape.js. Tai nemokamas ir atviras šaltinis:

http://js.cytoscape.org

42
25 апр. atsakymas duotas maxkfranz 25 balandžio. 2012-04-25 19:05 '12, 07:05 pm 2012-04-25 19:05

JsVIS buvo gana malonus, bet lėtas su dideliais grafikais ir nuo 2007 m.

„prefuse“ - tai programinės įrangos įrankių rinkinys, skirtas kurti turtingas, interaktyvias duomenų vizualizacijas „Java“. „flare“ yra „ActionScript“ biblioteka, skirta kurti „Adobe Flash Player“ veikiančias vizualizacijas, kurios buvo atsisakytos nuo 2012 m.

35
16 авг. atsakymas, kurį pateikė Sam Coles 16 rug. 2008-08-16 01:31 '08 1:31 am 2008-08-16 01:31

Komerciniame scenarijuje „HTML“ HTML failai tikriausiai yra rimtas konkurentas:

Ji siūlo:

  • Paprastas vartotojų duomenų importas ( ši interaktyvi internetinė demonstracija atrodo gana tiksliai tai, ko ieškojo OP)
  • Interaktyvus redagavimas, skirtas kurti ir tvarkyti grafikus su pasirinktiniais gestais (žr. Visas redaktorius )
  • Didžiulis programavimo API, leidžiantis pritaikyti kiekvieną bibliotekos aspektą
  • Parama grupavimui ir lizdams (tiek interaktyvūs, tiek naudojant žymėjimo algoritmus)
  • Tai nepriklauso nuo konkretaus vartotojo sąsajos įrankių rinkinio, tačiau ji palaiko integravimą į beveik bet kurį esamą „Javascript“ įrankių rinkinį (žr. „Integracijos“ demonstracijas )
  • Automatinis išdėstymas (įvairūs stiliai, pvz., „Hierarchinis“, „organinis“, „stačiakampis“, „medis“, „apskritas“, „radialinis“ ir tt)
  • Automatinis kompleksinis krašto nukreipimas (ortogoninis ir organinis krašto nukreipimas su kliūčių vengimu)
  • Papildomas ir dalinis išdėstymas (elementų įtraukimas ir ištrynimas ir tik nedidelis keitimas arba jokios kitos diagramos dalies keitimas)
  • Parama grupavimui ir lizdams (tiek interaktyvūs, tiek naudojant žymėjimo algoritmus)
  • Grafų analizės algoritmų (takų, centralizavimo, tinklo srautų ir tt) diegimas
  • Jis naudoja HTML 5 technologijas, tokias kaip SVG + CSS ir Canvas, taip pat modernias funkcijas, naudojant „Javascript“ ir kitas papildomas ES5 ir ES6 funkcijas (bet dėl ​​tos pačios priežasties jis neveiks IE 8 ir žemesnėse versijose).
  • Naudoja modulinę API, kurią galima pakrauti naudojant UMD krautuvus

Pateikiamas pateikimo pavyzdys, rodantis daugumą prašomų funkcijų:

2019

9
07 янв. atsakymas suteiktas Sebastianui 07 Jan 2013-01-07 14:00 '13 14:00 val. 2013-01-07 14:00

Kaip minėjo Guruzas, JIT turi puikių grafikų / medžių, įskaitant gana patrauklius RGraph ir HyperTree vaizdus.

Be to, ką tik išleidžiau super paprastą SVG metodą github'e (be priklausomybių, ~ 125 LOC), kuris turėtų veikti gana gerai, kai mažos grafikos rodomos šiuolaikinėse naršyklėse.

7
03 апр. Jack Rusher atsakymas 03 Bal. 2010-04-03 20:01 '10, 08:01 PM 2010-04-03 20:01

Kiti klausimai apie „ etiketes arba Užduoti klausimą