¿Cómo se dibujan las líneas de un árbol genealógico usando HTML CSS?

Question

Estoy tratando de implementar algo similar a lo que http://www.ancestry.com tiene, pero no estoy seguro de cómo dibujar las líneas.

Aquí es un esquema ascii aproximada de lo que quiero hacer:

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

Creo que una manera de hacer esto es crear una tabla de celdas, y crear imágenes de las líneas, conectar cada uno de los niños a sus padres Supongo que hay una manera más fácil de hacerlo, pero mi conocimiento de CSS es bastante limitado. ¿Alguien tiene alguna sugerencia sobre cómo puedo implementar esto?

Answer 1

Otra opción para una interfaz gráfica sería el elemento canvas. Puede encontrar información sobre él here, here, y algunas demostraciones de lo que puede hacer here.

Personalmente, elegiría Canvas con una superposición de mapa de imagen o posiblemente Flash. Crear un diseño gráfico utilizando solo divs o tablas podría salirse de control rápidamente y crear un código enorme y feo. Aunque eso es una cuestión de opinión. :)

Puede usar lienzo para representar las líneas, y luego posicionar divs con texto para cada nodo. O bien, podría hacer que todo el asunto de la lona (momento en el cual se necesitaría una superposición del mapa de imagen si desea que el árbol prestado a ser interactivo.)

Answer 2

Una opción es usar posicionamiento absoluto y algunas imágenes. Necesitará una línea horizontal y una imagen de línea vertical. Luego use posicionamiento para colocar los artículos con las líneas correspondientes.

Answer 3

Los ejemplos que he visto hasta ahora usan flash para cosas como esa. http://academia.edu por ejemplo.

De lo contrario, probablemente usaría con posición absoluta DIVs para compensar las líneas - que requerirían algunos cálculos complicados, aunque :)

Una tercera opción - si usted está dispuesto a utilizar más javascript y sacrificar algo de la compatibilidad del navegador es usar el elemento SVG. Puede consultar esta biblioteca: http://raphaeljs.com/ Hay una bonita demo similar a un árbol que puede encontrarle útil (http://raphaeljs.com/graffle.html).

Answer 4

Google tiene un control para este

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

Answer 5

Supongo que usando CANVAS.

Tener una mirada .. puede ser que da una idea Drawing Graphics with Canvas

Answer 6

Voy a tirar una respuesta más, aunque las respuestas anteriores son en el estadio de béisbol.

Supongamos que quiere trabajar en todos los navegadores. Si necesita trabajar en Internet Explorer y codifica su propia solución Canvas, puede incluir ExplorerCanvas.

Los árboles genealógicos son esencialmente árboles binarios - Lo sé, la vida real es complicada con las adopciones, los divorcios, ugh, pero supongamos por un segundo que son binarios yendo en una dirección (ancestros) de una persona en particular.

Una buena herramienta que utiliza Canvas, tiene el puente para trabajar en IE incluido, y utiliza un formato de datos simple y general es el JavaScript InfoVis Toolkit.

Salida de la muestra a: http://thejit.org/static/v20/Jit/Examples/Spacetree/example2.html

Puede que no sea exactamente lo que quiere sacarlo de la caja, pero se puede modificar la apariencia.

La carga útil de datos para plug-in es muy simple, y su ejemplo podría ser algo como esto:

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: []},   
    ]} 
    ] 
}; 

Estoy seguro de que hay otras soluciones por ahí, y espero que encuentre uno que funcione para ti.

Answer 7

Me gusta SlickMap CSS para esto.

Dado que está hecho de mapas de sitio, que los estilos anidados listas de enlaces, pero es trivial para modificarlo para manejar más de los enlaces en cada célula, como lo hice aquí: http://dl.dropbox.com/u/546793/demo/SlickmapCSS_rich/index.html

Answer 8

usted puede hacerlo con CSS puro. He aquí un ejemplo:

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

Answer 9

Puede utilizar jsPlumb, que es bastante bueno para ese tipo de cosas http://jsplumbtoolkit.com/demo/chart/mootools.html