2012-04-27 63 views
7

Tôi đang làm việc trên một thuật toán để vẽ một sơ đồ tư duy. Điểm chính ở đây là sắp xếp các nút một cách thông minh, sao cho không có sự chồng chéo và nó có vẻ được phân phối độc đáo. Như một ví dụ xem ảnh chụp màn hình này (từ MindNode):Cách vẽ một sơ đồ tư duy

what it should look like

Bất kỳ ý tưởng về cách sắp xếp cấu trúc độc đáo này, được đưa ra không gian mà mỗi nút chiếm? Bạn có biết bất kỳ mã nào mà tôi có thể xem xét (điều gì đó đơn giản hơn một chút so với graphviz) không?

Trước khi xuất hiện, tôi không tìm kiếm thuật toán "mô phỏng vật lý" như this hoặc các chương trình đã hoàn thành như dấu chấm. Cuối cùng tôi muốn thực hiện nó trong JS, nhưng đối với sự hiểu biết thuật toán bất kỳ ngôn ngữ là tốt.

Trả lời

1

Tôi đoán bạn chỉ có thể thực hiện việc này với CSS. Cung cấp các lớp phù hợp với JS cho các nút của bạn và CSS sẽ xử lý chúng khi cần thiết.

Ví dụ, bạn có thể thiết lập margin: 1em 0 1em 0 trên mỗi nút để nó có đủ không gian, vv vv

+0

là CSS đủ thông minh hiện nay để vẽ splines phù hợp như trong sơ đồ? –

+1

Bạn có thể chơi xung quanh với 'border-radius' cho điều này, vâng. Nhưng sử dụng 'canvas' sẽ tốt hơn tôi đoán. Thông báo trước là CSS sẽ không thực hiện bất kỳ phép thuật nào cho bạn và bạn sẽ phải tính toán mỗi khi bạn thêm một nút. –

+0

Hmm. Các bán kính đường viền không tròn khá đơn giản trong trình duyệt của tôi (Firefox), và thậm chí bỏ qua điều đó, tôi không nghĩ rằng bạn có thể tạo ra các đường cong ở trên chỉ sử dụng dấu ba chấm. Nhưng có lẽ các đường cong không phải là những gì người hỏi thực sự quan tâm: chỉ định vị được đề cập. –

Các vấn đề liên quan