Comment puis-je dessine les lignes d'un arbre généalogique en utilisant HTML CSS?

StackOverflow https://stackoverflow.com/questions/1695115

Question

Je suis en train de mettre en œuvre quelque chose de semblable à ce que http://www.ancestry.com a, mais Je ne sais pas comment dessiner les lignes.

Voici une esquisse 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 chacun des enfants à leurs parents. Je devine qu'il ya un moyen plus facile de le faire bien, mais ma connaissance de CSS est assez limité. Quelqu'un at-il une suggestion sur la façon dont je peux mettre en œuvre ce?

Était-ce utile?

La solution

Une autre option pour une interface graphique serait l'élément de toile. Vous pouvez trouver des informations sur ce , ici , et des démos de ce qu'il peut faire ici .

Personnellement, je choisirais Canvas avec une superposition de cartes d'image ou peut-être Flash. Création d'une mise en page graphique en utilisant uniquement des divs ou des tables pourraient sortir de la main très rapidement et créer un code énorme et laid. Bien que ce soit une question d'opinion. :)

Vous pouvez utiliser la toile pour rendre les lignes, puis tout à fait la position avec des div 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 soit rendu interactif.)

Autres conseils

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

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

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

Supposons que vous voulez travailler sur tous les navigateurs. Si vous avez besoin de travailler sur Internet Explorer, et vous codez votre propre solution de toile, vous pouvez inclure ExplorerCanvas .

Les arbres généalogiques sont essentiellement des arbres binaires - Je sais, la vraie vie est délicate avec les adoptions, les divorces, pouah, mais supposons que pour une seconde qu'ils sont binaires allant dans une direction (ancêtres) d'une personne particulière <. / p>

Un bon outil qui utilise la toile, 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.

Consultez 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 en trouviez un qui fonctionne pour vous.

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

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

Les exemples que je l'ai vu utiliser jusqu'à présent flash pour des trucs comme ça. http://academia.edu par exemple.

Dans le cas contraire, je serais probablement utiliser DIVs position absolue pour compenser les lignes - qui nécessiteraient des calculs compliqués, si:)

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 checkout cette bibliothèque: http://raphaeljs.com/ Il y a une belle démonstration comme arbre là-bas que vous trouverez peut-être utile ( http://raphaeljs.com/graffle. html ).

Je suppose que l'utilisation TOILE.

Jetez un oeil .. peut-être il donne une idée Graphics Dessin avec toile

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top