Comment dessiner les lignes d'un arbre généalogique en utilisant HTML CSS?

Question

J'essaie de mettre en œuvre quelque chose de similaire à ce que http://www.ancestry.com a, mais je ne suis pas sûr de savoir comment dessiner les lignes.

Voici un croquis ascii approximative de ce que je veux faire:

    +----GrDAD1 
       | 
    +----DAD----+ 
    |   +----GrMOM1 
ME --+ 
    |   +----GrDAD2 
    +----MOM----+ 
       | 
       +----GrMOM2 

Je pense que d'une façon de le faire est de créer une table de cellules, et créer des images des lignes, reliant chacune les enfants à leurs parents. Je suppose qu'il existe un moyen plus simple de le faire, mais ma connaissance du CSS est assez limitée. Quelqu'un at-il une suggestion sur la façon dont je peux implémenter cela?

Answer 1

Une autre option pour une interface graphique serait l'élément canvas. Vous pouvez trouver quelques informations à ce sujet here, here, et quelques démos de ce qu'il peut faire here.

Personnellement, je choisirais Canvas avec une superposition de carte image ou éventuellement Flash. La création d'une mise en page graphique en utilisant uniquement des divs ou des tables pourrait rapidement devenir incontrôlable et créer un code énorme et moche. Bien que ce soit une question d'opinion. :)

Vous pouvez utiliser canvas pour représenter les lignes, puis positionner absolument les divs avec du texte pour chaque noeud. Ou vous pourriez rendre la chose en toile (à quel point vous auriez besoin d'une superposition de cartes d'image si vous voulez que l'arbre rendu soit interactif.)

Answer 2

Une option consiste à utiliser le positionnement absolu et quelques images. Vous aurez besoin d'une ligne horizontale et d'une ligne verticale. Utilisez ensuite le positionnement pour positionner les éléments avec les lignes correspondantes.

Answer 3

Les exemples que j'ai vus jusqu'à présent utilisent flash pour des choses comme ça. http://academia.edu par exemple.

Sinon, je serais probablement utiliser absolument positionnai DIVs pour faire les lignes - qui nécessiteraient des calculs compliqués, bien que :)

Une troisième option - si vous êtes prêt à utiliser plus javascript et sacrifier une certaine compatibilité du navigateur est d'utiliser l'élément SVG. Vous pouvez vérifier cette bibliothèque: http://raphaeljs.com/ Il y a une belle démo en forme d'arbre que vous pouvez trouver utile (http://raphaeljs.com/graffle.html).

Answer 4

Google a un contrôle pour cette

http://code.google.com/apis/visualization/documentation/gallery/orgchart.html

Answer 5

Je suppose que l'utilisation de CANVAS.

Jetez un oeil .. peut-être il donne une idée Drawing Graphics with Canvas

Answer 6

Je jette encore une réponse, bien que les réponses ci-dessus sont tous dans le stade de baseball.

Supposons que vous souhaitiez travailler sur tous les navigateurs. Si vous devez travailler sur Internet Explorer et que vous codez votre propre solution Canvas, vous pouvez inclure ExplorerCanvas. Les arbres généalogiques sont essentiellement des arbres binaires - Je sais, la vie réelle est difficile avec les adoptions, les divorces, mais supposons une seconde qu'ils sont binaires dans une direction (ancêtres) d'une personne en particulier.

Un bon outil qui utilise Canvas, a le pont pour travailler sur IE inclus, et utilise un format de données simple et générale est le JavaScript InfoVis Toolkit.

Découvrez l'échantillon à: http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html

Il ne peut pas être exactement ce que vous voulez de la boîte, mais vous pouvez modifier l'apparence.

La charge utile de données plug-in est très simple, et votre exemple ressemblerait à quelque chose comme ceci:

var tree = { 
    id: "ME", // Needs to be internally unique 
    name: "ME", // Visual label, does not need to match id 
    data: {}, // not really used here, but parameter needed 
    children: [ 
    {id: "DAD", 
    name: "DAD", 
    data: {}, 
    children: [ 
     {id: "GrDAD1", 
     name: "GrDAD1", 
     data: {}, 
     children: []}, 
     {id: "GrMOM1", 
     name: "GrMOM1", 
     data: {}, 
     children: []},   
    ]}, 
    {id: "MOM", 
    name: "MOM", 
    data: {}, 
    children: [ 
     {id: "GrDAD2", 
     name: "GrDAD2", 
     data: {}, 
     children: []}, 
     {id: "GrMOM2", 
     name: "GrMOM2", 
     data: {}, 
     children: []},   
    ]} 
    ] 
}; 

Je suis sûr qu'il ya d'autres solutions là-bas, et j'espère que vous trouverez un qui fonctionne pour toi.

Answer 7

J'aime SlickMap CSS pour cela.

Comme il est fait pour les sitemaps, il styles des listes imbriquées de liens, mais il est trivial de le modifier pour gérer plus de liens dans chaque cellule, comme je l'ai fait ici: http://dl.dropbox.com/u/546793/demo/SlickmapCSS_rich/index.html

Answer 8

Vous pouvez le faire avec css pur. Voici un exemple:

http://thecodeplayer.com/walkthrough/css3-family-tree

Answer 9

Vous pouvez utiliser jsPlumb, ce qui est assez bon pour ce genre de choses http://jsplumbtoolkit.com/demo/chart/mootools.html