Come faccio a mostrare i matrimoni in un "albero genealogico" basato su d3.js?

Question

Sono uno sviluppatore HTML/CSS, alla ricerca di soluzioni javascript per la creazione di un 'albero genealogico' che deve mostrare i matrimoni (da fuori della famiglia, ovviamente) in modo significativo.

In sostanza sto cercando di basarlo su un dendrogramma, basato su d3.js, ad es. http://bl.ocks.org/4063570, ma ho faticato a trovare qualcosa che esprima "matrimoni".

seguito è un'immagine dei dati sarò basandola su:

Qualsiasi aiuto/suggerimenti/link sarebbe molto apprezzato! Non so se è possibile, ma mi piacerebbe usare d3.js perché sembra così ben fatto e apparentemente versatile.

Answer 1

Ci sono alcune opzioni, ma credo che ognuna richiederebbe un po 'di lavoro. Sarebbe utile se esistesse un unico standard per rappresentare un albero genealogico in JSON. Di recente ho notato che geni.com ha un'API abbastanza approfondita per questo. Forse codifica contro la loro API sarebbe una buona idea per la riusabilità ...

- Albero genealogico -

The Pedigree Tree potrebbe essere sufficiente per le vostre esigenze. Faresti linkabile da suocero, dove se avessi fatto clic sul loro nome il grafico si ridisegnerebbe in modo da poter vedere il loro lignaggio.

- Staffa layout Tree -

Simile al Albero genealogico, ma bidirezionale, questo Bracket Layout Tree consente di gestire un "qui sono i miei genitori, nonni, figli, nipoti" tipo di visualizzazione. Come nell'albero genealogico, puoi rendere le persone collegabili per ricentrare la parentesi su quel nodo.

- Layout Forza-Based -

Ci sono alcune interessanti layout di forza-based che sembrano promettenti. Dai un'occhiata a this example of a force-based layout with smart labels. Un aggiustamento dell'algoritmo per come viene determinata la "forza" potrebbe renderlo un albero molto bello, con le generazioni precedenti sopra o sotto quelle più nuove.

- Cluster dendogramma (il motivo per cui non riesce) -

I layout d3.js che ho visto che sarebbe meglio si prestano ad alberi genealogici assumere un singolo nodo è il genitore, mentre è necessario rappresentare la genitore come combinazione di (visivamente una "T" tra) due nodi: un nodo che è un membro dell'albero e un nodo mobile che rappresenta il suocero. La regolazione di un dendogramma del cluster per farlo dovrebbe essere fattibile, ma non senza modifiche significative.

Se tu - o chiunque altro per questo - affronta questo, fammi sapere. Mi piacerebbe vedere (e trarre beneficio) dal lavoro e potrei essere in grado di contribuire se possibile.

Answer 2

Avevo anche bisogno di disegnare pedigree con D3 così ho capito come. Ho created examples che mostra la funzionalità di base e quindi aggiungere funzioni avanzate come l'espansione e la visualizzazione dei discendenti.

Non so come si desidera visualizzare i matrimoni. I matrimoni sono inerenti a un albero genealogico ancestrale ma non a un diagramma di discendenza. Il codice potrebbe essere adattato per mostrare i coniugi nei nodi discendenti.

Ecco una foto di come appare. Lo stile può essere ottimizzato come desiderato.

Answer 3

Questo bisogno di qualche lavoro, ma in sostanza l'idea che propongo è fare un layout forza con un particolare tipo di nodo denominato rapporto che non disegnare un cerchio. Rappresenta il legame tra due soggetti e può essere il genitore di più nodi.

In d3 è possibile estendere tutte le strutture dati per adattarle a ciò che si desidera, quindi c'è più lavoro per legare i dati ma è tutto personalizzabile. Ecco un esempio delle strutture di dati che utilizzerei nel layout della forza.

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

Spero di aver chiarito qualcosa sulle possibilità di d3.