Thư viện JS để tạo một sơ đồ tư duy như giao diện

Question

Tôi phải tạo một giao diện tương tự như những gì http://www.madeiracloud.com cung cấp để vẽ kiến ​​trúc mạng (cho các mục đích khác với những gì chúng đang làm).

Về cơ bản, người dùng có thể kéo các phần tử thả & vào canvas và kết nối chúng bằng các mũi tên định hướng.

Tôi nên sử dụng thư viện nào cho điều này? Tôi đang nhìn d3, raphael và ocanvas.

Answer 1

Raphaël (http://raphaeljs.com/) kết hợp với Thư viện biểu đồ Dracula (http://dracula.ameisenbar.de/) sẽ giúp bạn bắt đầu.

và cũng thejit là hoàn hảo:

Multi-Trees JavaScript InfoVis Toolkit cung cấp các công cụ cho việc tạo Interactive Data Visualizations cho Web.

http://thejit.org/

Edit:

bạn cũng có thể có một cái nhìn tại Processing.js

http://processingjs.org/

Processing.js là dự án chị của chế biến phổ biến ngôn ngữ lập trình trực quan , được thiết kế cho web. Processing.js làm cho trực quan hóa dữ liệu của bạn, nghệ thuật kỹ thuật số, hoạt ảnh tương tác, đồ thị giáo dục, trò chơi video, v.v. hoạt động bằng các tiêu chuẩn web và không có bất kỳ trình cắm nào. Bạn viết mã bằng cách sử dụng ngôn ngữ xử lý, bao gồm nó trong trang web của bạn, và Processing.js làm phần còn lại.

Answer 2

Bạn nên xem dự án MindMap sử dụng Raphael.js nội bộ.

Bạn có thể tìm thấy những bản demo tại http://kenneth.kufluk.com/google/js-mindmap/

Answer 3

Trong một bối cảnh thương mại, bạn cũng nên có một cái nhìn vào những gì yFiles for HTML đã cung cấp.

Đó là bản vẽ đồ thị chung và chỉnh sửa thư viện javascript giúp giải quyết trường hợp sử dụng dễ dàng "kéo và thả và kết nối" của bạn. Ngoài ra còn có một cụ mind map example sẵn trực tuyến:

nhưng trong ứng dụng này các nút không được tạo ra thông qua việc kéo và thả. Điều này tuy nhiên tất nhiên là có thể, quá, như có thể được nhìn thấy trong this online demo.

Điểm mạnh cụ thể của thư viện đó là bố trí/sắp xếp các nút và kết nối tự động, vì vậy nếu bạn đang tạo mạng lớn hơn hoặc tự động điền biểu đồ từ nguồn dữ liệu ngoài, chúng rất tiện dụng. Tuy nhiên, nếu bạn không yêu cầu bộ tính năng này, các giải pháp đơn giản hơn cũng có thể hoạt động. Lưu ý rằng d3 tập trung vào dữ liệu xem và không quá nhiều về tương tác của người dùng và tạo biểu đồ tương tác.

^{Tuyên bố từ chối trách nhiệm: Tôi làm việc cho công ty tạo thư viện đó, tuy nhiên tôi không đại diện cho chủ nhân của tôi trên SO. Ý kiến ​​của tôi là của riêng tôi.}