Jak wyświetlić małżeństwa w drzewie genealogicznym opartym na d3.js?

Question

Jestem programistą HTML/CSS, badającym rozwiązania javascript do budowania "drzewa genealogicznego", które musi pokazywać małżeństwa (spoza rodziny, oczywiście) w znaczący sposób.

Zasadniczo szukam w oparciu o dendrogram, oparty na d3.js, np. http://bl.ocks.org/4063570, ale walczyłem, aby znaleźć coś, co wyraża "małżeństwa".

Poniżej znajduje się obraz danych będę opierając ją na:

Każda pomoc/sugestie/linki będą mile widziane! Po prostu nie wiem, czy to nawet możliwe, ale chciałbym użyć d3.js, ponieważ wygląda tak dobrze, i najwyraźniej wszechstronny.

Answer 1

Istnieje kilka opcji, ale uważam, że każdy z nich wymagałby trochę pracy. Pomogłoby, gdyby istniał jeden standard reprezentujący drzewo genealogiczne w JSON. Niedawno zauważyłem, że geni.com ma dość dogłębny interfejs API. Być może wbrew ich kodowania API byłoby dobrym pomysłem dla ponownego użycia ...

- drzewo rodowe -

The Pedigree Tree może być wystarczający dla Twoich potrzeb. Uczyniłbyś linka w teściowie, gdzie gdybyś kliknął na ich nazwę, wykres przerysował byś mógł zobaczyć ich rodowód.

- Wspornik Układ Tree -

podobne do Drzewo rodowe, ale dwukierunkowy, to Bracket Layout Tree pozwala obsłużyć „tu są moi rodzice, dziadkowie, dzieci, wnuki” typ widoku. Podobnie jak Drzewo Zarodowe, możesz sprawić, że poszczególne osoby będą mogły się połączyć, aby ponownie umieścić nawias w tym węźle.

- Siła-Based Layout -

Istnieje kilka ciekawych układów opartych siły, które wydają się obiecujące. Spójrz na this example of a force-based layout with smart labels. Dostosowanie algorytmu do tego, jak określona jest "siła", może uczynić z niego bardzo piękne drzewo, ze starszymi pokoleniami powyżej lub poniżej nowszych.

- Cluster dendrogram (dlaczego nie) -

Układy d3.js widziałem, że nadają się najlepiej do drzew rodzinnych zakładać pojedynczy węzeł jest rodzicem, podczas gdy trzeba do reprezentowania rodzic jako kombinacja (wizualnie "T" między) dwoma węzłami: jeden węzeł, który jest członkiem twojego drzewa, i jeden węzeł pływający, który reprezentuje teściową. Dostosowanie do tego celu dendogramu klastrowego powinno być wykonalne, ale nie bez istotnych modyfikacji.

Jeśli ty - lub ktoś inny w tej sprawie - zmierzyć się z tym, daj mi znać. Chciałbym zobaczyć (i skorzystać z) pracy i być może będę w stanie wnieść do niej swój wkład, jeśli to możliwe.

Answer 2

Potrzebowałem również narysować rodowody przy pomocy D3, więc zorientowałem się, w jaki sposób. Mam created examples, które pokazują podstawową funkcjonalność, a następnie dodają zaawansowane funkcje, takie jak rozwijanie i pokazywanie potomków.

Nie wiem, jak chcesz wyświetlać małżeństwa. Małżeństwa są nieodłączne od rodowego rodowodu, ale nie w tabeli potomków. Kod mógłby zostać dostosowany do pokazywania małżonków w węzłach potomnych.

Oto zdjęcie z tego, jak wygląda. Styl można dowolnie modyfikować.

Answer 3

To wymaga jeszcze trochę pracy, ale przede wszystkim pomysł proponuję to zrobić układ sił ze specjalnego rodzaju węzła nazywany relacji, które nie narysować okrąg. Reprezentuje powiązanie między dwoma podmiotami i może być rodzicem większej liczby węzłów.

W wersji d3 można rozszerzyć wszystkie struktury danych, aby pasowały do ​​potrzebnych danych, a następnie można wykonać więcej pracy, aby powiązać dane, ale można je dostosować. Oto przykład struktur danych, których użyłbym w układzie sił.

{ 
    "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 
    } 
    ] 
} 

Mam nadzieję, że wyjaśniłem coś o możliwościach d3.