cho các đường nối hình chữ nhật

Question

Tôi đang tìm giải thuật hoặc giải pháp mẫu để vẽ các đường kết nối giữa các hình chữ nhật. Trong trường hợp hình chữ nhật của tôi là các yếu tố biểu đồ Gantt và kết nối hiển thị depenedencies. Tôi đang sử dụng thư viện Raphael JS để vẽ các hình chữ nhật và các dòng. Vì vậy, một giải pháp trong JavaScript sẽ là tốt nhất, nhưng một thuật toán trong ngôn ngữ meta hoặc JS khác tương tự cũng sẽ được tốt đẹp.

Tôi đã tìm thấy an example that looks nice nhưng có thể ai đó biết điều gì đó khác.

Trong trường hợp của tôi có một vài yêu cầu có liên quan:

1. đường chỉ ngang và dọc được phép
2. đường không nên bắt chéo nhau
3. dòng nên không chéo hình chữ nhật tôi hy vọng sẽ đạt được một cái gì đó tương tự như sau:

Answer 1

Có vẻ như bạn đang tìm kiếm javascript gantt biểu đồ. Hãy kiểm tra này ai:

http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml

• biểu đồ Editable
• Kiểm soát hoàn toàn với JavaScript API
• Multi-trình duyệt/đa nền tảng hỗ trợ
• tải từ XML
• serialization to XML
• Hoạt động có thể di chuyển/có thể thay đổi kích thước
• Built-in chỉnh sửa trình đơn, cộng với hỗ trợ tùy chỉnh dhtmlxMenu
• tính Extended pop-up
• Tùy chọn xem cây
• thuê bao nhiệm vụ tùy chỉnh
• shadings Phần trăm hoàn tất
• mũi tên phụ thuộc
• nhanh và mượt mà vẽ
• Kiểm tra ràng buộc tích hợp
• Chế độ thân thiện với in

http://www.bryntum.com/products/gantt/

• xây dựng hoàn toàn trên các chuẩn web - HTML/CSS/Javascript
• Sử dụng với bất kỳ máy chủ (PHP, Java, ASP.NET)
• Hỗ trợ phụ thuộc, dẫn/lag và đường dẫn quan trọng
• Xuất sang PDF/PNG, nhập khẩu MS Project
• dự án, nhiệm vụ và tài nguyên lịch
• Đơn vị thử nghiệm với Siesta

http://gxt-scheduler.com/

• Được xây dựng hoàn toàn trên các tiêu chuẩn web - HTML/CSS/GWT
• Tích hợp với bất kỳ loại phụ trợ
• Hoàn toàn themeable, chỉ yêu cầu cơ bản kiến ​​thức về HTML/CSS
• Kéo & thả và thay đổi kích thước các mặt hàng dễ dàng
• Hỗ trợ tất cả các trình duyệt chính

http://gantter.com/

• tích hợp ổ google
• Lập lịch dự án dựa trên đám mây MIỄN PHÍ

http://gantt.twproject.com/

• chỉnh sửa tại chỗ
• kéo & thả
• phóng to
• làm/undo
• nhiều phụ thuộc
• đầy đủ chỉnh sửa
• ngày s hortcuts
• da css
• nhiều trình duyệt
• nguồn lực chỉnh sửa
• nhiều phân
• mốc
• xuất dữ liệu ở định dạng JSON
• thay đổi kích thước & cuộn