Comment afficher les mariages dans un arbre généalogique basé sur d3.js?

Question

Je suis un développeur HTML/CSS, la recherche de solutions javascript pour la construction d'un « arbre généalogique » qui a besoin de montrer les mariages (de l'extérieur de la famille, bien sûr) d'une manière significative.

Essentiellement, je suis à la recherche se basant sur un dendrogramme, sur la base, par exemple d3.js http://bl.ocks.org/4063570, mais j'ai eu du mal à trouver quelque chose qui exprime des «mariages».

Ci-dessous est une image des données que je vais sur le fondant:

Toute aide/suggestions/liens serait très apprécié! Je ne sais pas si c'est même possible, mais j'adorerais utiliser d3.js car il semble si bien fait, et apparemment polyvalent.

Answer 1

Il y a quelques options, mais je crois que chacune nécessiterait un peu de travail. Cela aiderait s'il y avait une seule norme pour représenter un arbre généalogique dans JSON. J'ai récemment remarqué que geni.com a une API assez détaillée pour cela. Peut-être contre leur codage API serait une bonne idée pour réutilisabilité ...

- arbre généalogique -

The Pedigree Tree pourrait être suffisant pour vos besoins. Vous feriez en sorte que la loi soit lisible, si vous cliquiez sur leur nom, le graphique se redessinerait pour que vous puissiez voir leur lignée.

- Arbre mise en page Support -

similaires à l'Arbre Généalogique, mais bidirectionnelle, ce Bracket Layout Tree vous permet de gérer un « voici mes parents, mes grands-parents, enfants, petits-enfants » vue type. À l'instar de l'Arbre généalogique, vous pouvez lier des individus pour recentrer le support sur ce nœud.

- Mise en force à base -

Il y a quelques mises en page à base de force intéressants qui semblent prometteurs. Jetez un oeil à this example of a force-based layout with smart labels. Un ajustement à l'algorithme de détermination de la "force" pourrait en faire un très bel arbre, avec des générations plus anciennes au-dessus ou en dessous des plus récentes.

- Cluster dendrogramme (pourquoi il échoue) -

Les dispositions de d3.js que j'ai vu qui se prêteraient mieux aux arbres de la famille supposent un seul nœud est le parent, alors que vous devez représenter la parent comme la combinaison de (visuellement un «T» entre) deux nœuds: un nœud qui est un membre de votre arbre, et un nœud flottant qui représente la belle-famille. Ajuster un dendogramme de cluster pour ce faire devrait être réalisable mais pas sans modification significative.

Si vous - ou quelqu'un d'autre d'ailleurs - abordez cela, faites le moi savoir. J'aimerais voir (et en tirer profit) le travail et être en mesure d'y contribuer si possible.

Answer 2

J'ai aussi besoin de dessiner pedigrees avec D3 donc je compris comment. J'ai created examples qui montrent les fonctionnalités de base, puis ajouter des fonctionnalités avancées telles que l'expansion et l'affichage des descendants.

Je ne sais pas comment vous voulez afficher les mariages. Les mariages sont inhérents à un pedigree ancestral mais pas à un tableau de descendance. Le code pourrait être adapté pour montrer les conjoints dans les noeuds descendants.

Voici une photo de son apparence. Le style peut être modifié comme vous le souhaitez.

Answer 3

Ce besoin de quelques travaux, mais essentiellement l'idée que je propose est de faire une mise en page de force avec une relation particulière appelée nœud qui ne dessine pas un cercle. Il représente la liaison entre deux sujets et peut être le parent de plusieurs noeuds. En d3 vous pouvez étendre toutes les structures de données pour qu'elles correspondent à ce que vous voulez, puis il y a plus de travail pour lier les données mais tout est personnalisable. Voici un échantillon des structures de données que j'utiliserais dans la mise en page de force.

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

Espérons que j'ai clarifié quelque chose sur les possibilités de d3. D'une part, vous avez les gens, qui peuvent être représentés comme des noeuds dans le graphique (boîtes)