Làm cách nào để hiển thị cuộc hôn nhân trong 'family-tree' dựa trên d3.js?

Question

Tôi là nhà phát triển HTML/CSS, nghiên cứu các giải pháp javascript để xây dựng 'cây gia đình', trong đó cần hiển thị cuộc hôn nhân (từ bên ngoài gia đình), theo cách có ý nghĩa.

Về cơ bản, tôi đang xem xét dựa trên cơ sở dendrogram, dựa trên d3.js, ví dụ: http://bl.ocks.org/4063570, nhưng tôi đã vật lộn để tìm thấy bất cứ điều gì ngoài kia thể hiện 'hôn nhân'.

Dưới đây là hình ảnh của các dữ liệu tôi sẽ được dựa trên nó:

Bất kỳ trợ giúp/góp ý/liên kết sẽ được nhiều đánh giá cao! Tôi chỉ không biết nếu nó thậm chí có thể, nhưng rất thích sử dụng d3.js vì nó trông rất tốt, và dường như linh hoạt.

Answer 1

Có một số tùy chọn, nhưng tôi tin rằng mỗi tùy chọn sẽ yêu cầu một chút công việc. Nó sẽ giúp nếu có một tiêu chuẩn duy nhất để biểu diễn một cây gia đình bằng JSON. Gần đây tôi đã nhận thấy rằng geni.com có ​​API khá sâu về điều này. Có lẽ mã hóa chống API của họ sẽ là một ý tưởng tốt cho việc tái sử dụng ...

- cây Pedigree -

The Pedigree Tree có thể là đủ cho nhu cầu của bạn. Bạn sẽ làm cho liên kết của pháp luật, nơi nếu bạn nhấp vào tên của họ đồ thị sẽ vẽ lại để bạn có thể nhìn thấy dòng dõi của họ.

- Bracket Layout Tree -

Tương tự như cây Pedigree, nhưng hai chiều, Bracket Layout Tree này cho phép bạn xử lý một "ở đây là cha mẹ, ông bà, con, cháu của tôi" kiểu xem. Giống như cây Pedigree, bạn sẽ làm cho các cá nhân có thể liên kết để căn giữa lại khung hình trên nút đó.

- Bố cục dựa trên lực lượng -

Có một số bố cục dựa trên lực lượng thú vị có vẻ đầy hứa hẹn. Hãy xem this example of a force-based layout with smart labels. Một điều chỉnh cho thuật toán về cách thức "lực lượng" được xác định có thể biến nó thành một cây rất đáng yêu, với các thế hệ cũ hơn hoặc dưới những thế hệ mới hơn.

- Cụm Dendogram (tại sao nó không thành công) -

Sơ đồ bố trí d3.js I have seen that sẽ cho vay mình tốt nhất để cây gia đình thừa nhận một nút duy nhất là phụ huynh, trong khi đó bạn cần phải đại diện cho cha mẹ như là sự kết hợp của (trực quan một "T" giữa) hai nút: một nút là một thành viên của cây của bạn, và một nút nổi đại diện cho trong pháp luật. Việc điều chỉnh một biểu đồ cụm để thực hiện điều này sẽ khả thi nhưng không thay đổi đáng kể.

Nếu bạn - hoặc bất kỳ ai khác về vấn đề đó - giải quyết vấn đề này, hãy cho tôi biết. Tôi muốn thấy (và hưởng lợi từ) công việc và có thể đóng góp cho nó nếu khả thi.

Answer 2

Tôi cũng cần phải vẽ phả hệ với D3 vì vậy tôi đã tìm ra cách. Tôi có created examples hiển thị chức năng cơ bản và sau đó thêm vào các tính năng nâng cao như mở rộng và hiển thị con cháu.

Tôi không biết bạn muốn hiển thị cuộc hôn nhân như thế nào. Hôn nhân là cố hữu trong phả hệ tổ tiên nhưng không có trong biểu đồ con cháu. Các mã có thể được điều chỉnh để hiển thị vợ chồng trong các nút hậu duệ.

Đây là hình ảnh của giao diện. Phong cách có thể được tinh chỉnh như mong muốn.

Answer 3

này cần một số công việc, nhưng về cơ bản ý tưởng Tôi đề nghị là làm một cách bố trí lực lượng với một loại đặc biệt của nút gọi mối quan hệ đó không vẽ một vòng tròn. Nó đại diện cho sự liên kết giữa hai đối tượng và có thể là phụ huynh của nhiều nút hơn.

Trong d3 bạn có thể mở rộng tất cả các cấu trúc dữ liệu để phù hợp với những gì bạn muốn, sau đó có nhiều công việc để ràng buộc dữ liệu nhưng tất cả đều có thể tùy chỉnh. Đây là một mẫu của các cấu trúc dữ liệu tôi sẽ sử dụng trong bố cục lực.

{ 
    "nodes": [ 
    { 
     "type": "root", 
     "x": 300, 
     "y": 300, 
     "fixed": true 
    }, 
    { 
     "type": "male", 
     "name": "grandpa" 
    }, 
    { 
     "type": "female", 
     "name": "grandma" 
    }, 
    { 
     "type": "relationship" 
    }, 
    { 
     "type": "male", 
     "name": "dad" 
    }, 
    { 
     "type": "female", 
     "name": "mum" 
    }, 
    { 
     "type": "relationship" 
    }, 
    { 
     "type": "male", 
     "name": "I" 
    } 
    ], 
    "links": [ 
    { 
     "source": 0, 
     "target": 2 
    }, 
    { 
     "source": 1, 
     "target": 2 
    }, 
    { 
     "source": 0, 
     "target": 3 
    }, 
    { 
     "source": 3, 
     "target": 4 
    }, 
    { 
     "source": 4, 
     "target": 6 
    }, 
    { 
     "source": 5, 
     "target": 6 
    }, 
    { 
     "source": 6, 
     "target": 7 
    } 
    ] 
} 

Hy vọng tôi đã làm rõ điều gì đó về khả năng của d3.