Biblioteka JS do tworzenia interfejsu typu mindmap jak

Question

Muszę stworzyć interfejs podobny do tego, co http://www.madeiracloud.com zapewnia rysowanie architektury sieci (dla różnych celów niż to, co robią).

Zasadniczo użytkownicy powinni móc przeciągać elementy na płótno i łączyć je za pomocą strzałek kierunkowych.

Jakiej biblioteki należy użyć do tego? Patrzę na d3, raphael i ocanvas.

Answer 1

Raphaël (http://raphaeljs.com/) w połączeniu z biblioteką wykresów Dracula (http://dracula.ameisenbar.de/) uruchomi Cię.

a także thejit jest doskonała:

Wielu Drzewa Kod JavaScript InfoVis Toolkit dostarcza narzędzi do tworzenia interaktywnych wizualizacje danych dla sieci Web.

http://thejit.org/

Edit:

można również spojrzeć na Processing.js

http://processingjs.org/

Processing.js jest projekt siostra wizualny język programowania Processing popularne , przeznaczone do internetu. Processing.js sprawia, że ​​wizualizacje danych, sztuka cyfrowa, interaktywne animacje, wykresy edukacyjne, gry wideo itp. Działają w oparciu o standardy sieciowe i bez żadnych wtyczek. Piszesz kod za pomocą języka Processing, umieszczasz go na swojej stronie, a Processing.js zajmuje się resztą.

Answer 2

Powinieneś spojrzeć na projekt MindMap, który używa wewnętrznie Raphael.js.

można znaleźć demo na http://kenneth.kufluk.com/google/js-mindmap/

Answer 3

W kontekście komercyjnym należy również spojrzeć na to, co yFiles for HTML ma do zaoferowania.

Jest to ogólny rysunek wykresu i edycji biblioteki javascript, który rozwiązuje problem "przeciągnij i upuść i połącz". Istnieje również specyficzny mind map example dostępne online:

ale w tym zastosowaniu węzłów nie są tworzone za pomocą metody przeciągnij i upuść. Jest to jednak możliwe, jak można zauważyć w this online demo.

Konkretne atuty tej biblioteki to automatyczny układ/rozmieszczenie węzłów i połączeń, więc jeśli tworzysz większe sieci lub automatycznie wypełniasz wykres z zewnętrznego źródła danych, są one bardzo przydatne. Jednakże, jeśli nie potrzebujesz tego zestawu funkcji, oczywiście mogą również działać prostsze rozwiązania. Zwróć uwagę, że d3 koncentruje się na danych , wyświetlając dane i nie tyle chodzi o interakcję z użytkownikiem, co o interaktywne tworzenie wykresów.

^{Nota prawna: Pracuję dla firmy, która tworzy tę bibliotekę, jednak nie reprezentuję mojego pracodawcy w SO. Moje komentarze są moje.}