Thư viện Javascript - Sơ đồ cây gia đình

Question

Im tìm kiếm Thư viện Javascript đơn giản (svg?) Cho phép tôi vẽ các mối quan hệ cây gia đình.

Tôi đã tìm kiếm rất nhiều trên google tìm thấy rất nhiều thư viện thú vị như Raphaël và Dracula mở rộng của nó. Google cũng có thư viện riêng để tạo lưu đồ.

Thật không may, mọi thư viện đều tạo mối quan hệ giữa các nút có đường sigle. Nếu A và B có quan hệ với C, tôi sẽ nhận được 2 dòng: một từ A đến C và một từ B đến C.

Những gì tôi cần là một dòng từ A đến B (chúng tôi gọi nó là AB) và một dòng từ AB C để đại diện cho hôn nhân của A và B.

example-image

Cảm ơn.

Answer 1

Tôi đang gặp vấn đề tương tự. Đây là những gì tôi đã tìm thấy:

• http://chandler.prallfamily.com/2011/05/my-family-tree/
• http://www.headjump.de/article/arrows-and-boxes
• http://astuteo.com/slickmap/

Bạn có bất cứ giải pháp nào khác không?

Answer 2

Tôi đã chỉnh sửa Graphviz dot-tệp để tạo ra kết quả như vậy. Hiện tại tôi đang làm việc trên tập lệnh Ruby để tạo tệp này từ tệp .gedcom.

Tại đây, nội dung .dot, các nút có số chỉ là dấu chấm và dòng chảy theo đúng hướng.

digraph G { 
    graph [nodesep=0.2,splines=ortho,ranksep=0.05] 
    node [shape=box,fontname=Helvetica,fontsize=8;color="green",fixedsize=true,width=1,height=0.5,style=filled] 
    Grandfather [color="lightblue"] 
    Grandmother [color="pink"] 
    StephGrandmother [color="pink"] 
    Father [color="lightblue"] 
    Mother [color="pink"] 
    Uncle [color="lightblue"] 
    Laurent [color="lightblue"] 
    Child2 [color="lightblue"] 
    Child3, Child4 [color="pink"] 
    node[label="", width=0, height=0]; 
    edge[arrowhead=none, color=blue]; 
    {rank=same;StephGrandmother;Grandfather;Grandmother;Grandfather1} 
    {rank=same;Father;Father1;Mother;Uncle} 
    {rank=same;Laurent;Child2;Child3,Child4} 
    {rank=same;Father2;Father3} 
    StephGrandmother:e -> Grandfather:w 
    Grandfather:e -> Grandfather1 
    Grandfather1 -> Grandmother:w 
    Grandfather1 -> Grandfather2 
    Grandfather2 -> Father:n 
    Grandfather2 -> Uncle:n 
    Father:e -> Father1 
    Father1 -> Mother:w 
    Father1 -> Father2 
    Father2:w -> Laurent:n 
    Father2:w -> Child2:n 
    Father2 -> Father3 
    Father3:e -> Child3:n 
    Father3:e -> Child4:n 
} 

Answer 3

Trong khi không phải là "thư viện", một tiện ích tồn tại cho phép bạn vẽ chính xác những gì bạn mô tả. Được gọi đơn giản là "Tiện ích SVG", đây là một phần mềm miễn phí với một nhà thiết kế đồ họa cho phép bạn xác định các mối quan hệ gia đình thực (bao gồm nhiều vợ chồng, trẻ em dự kiến, vv). Xem More on SVG Family Trees.

Sau khi được thiết kế, các mối quan hệ và bố cục được chụp theo định dạng tệp văn bản đơn giản để chúng có thể được sửa đổi hoặc sử dụng lại. Tiện ích này tạo ra một phiên bản SVG để sử dụng trong một bài đăng trên blog hoặc trang Web khác. Có một số cấu hình có thể cho phép nhiều hình ảnh SVG trên cùng một trang, chú giải công cụ hoặc thông tin bật lên phía sau hộp người hoặc "gia đình", thu phóng từng cây, hình thu nhỏ cùng với chú thích, v.v.

Bộ cài đặt, tài liệu và các mẫu có sẵn trong thư mục Dropbox. Liên hệ với tác giả của bài đăng trên blog được đề cập ở trên để có quyền truy cập vào nó.

Tiện ích được thiết kế để chạy trong Windows, nhưng cũng được chạy dưới lớp tương thích WINE trên máy Mac.