¿Cómo puedo dibujar las líneas de un árbol utilizando HTML CSS?

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

Pregunta

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í está un boceto 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 hacer esto, sin embargo, pero mis conocimientos de CSS es bastante limitada. ¿Alguien tiene una sugerencia sobre cómo puedo aplicar esto?

¿Fue útil?

Solución

Otra opción para una interfaz gráfica sería el elemento canvas. Usted puede encontrar algo de información sobre el mismo aquí , aquí noreferrer , y algunas demos de lo que puede hacer aquí .

En lo personal, yo elegiría la lona con una superposición del mapa de imagen o posiblemente flash. Crear una presentación gráfica utilizando sólo divs o tablas pueden ir de las manos muy rápidamente y crear un código enorme y fea. A pesar de que es una cuestión de opinión. :)

Se puede usar tela para hacer las líneas, y luego absolutamente posición divs con el 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.)

Otros consejos

Puede hacerlo con CSS puro. He aquí un ejemplo:

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

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

Supongamos que desea trabajar en todos los navegadores. Si usted necesita para trabajar en Internet Explorer, y que el código de su propia solución lienzo, es posible que desee incluir ExplorerCanvas .

Los árboles genealógicos son esencialmente árboles binarios - Lo sé, la vida real es difícil con adopciones, divorcios, uf, pero vamos a suponer por un momento que son binaria ir en una dirección (antepasados) de una persona en particular <. / p>

Una buena herramienta que utiliza el lienzo, el puente tiene que 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 el 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 usted.

SlickMap CSS para esto.

Desde que está hecho para los mapas de sitio, que anida estilos 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

Una opción es utilizar el posicionamiento absoluto y algunas imágenes. Necesitará una imagen de una línea vertical y la línea horizontal. A continuación, utilice posicionamiento para posicionar los artículos con las líneas correspondientes.

Los ejemplos que he visto hasta ahora utilizar el flash de cosas por el estilo. http://academia.edu por ejemplo.

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

Una tercera opción - si usted está dispuesto a utilizar más javascript y sacrificar algo de la compatibilidad del navegador es utilizar el elemento SVG. Puedes retirar esta biblioteca: http://raphaeljs.com/ Hay una bonita demostración de árbol allí que usted puede encontrar útil ( http://raphaeljs.com/graffle. html ).

Creo que usando la lona.

Tenga una mirada .. puede ser que da una idea de gráficos del dibujo con lienzo

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top