Biblioteca de Javascript - Diagrama de flujo del árbol genealógico

Question

Estoy buscando una biblioteca Javascript simple (svg?) Que me permita dibujar una relación de árbol genealógico.

He buscado mucho en google encontré muchas bibliotecas interesantes como Raphaël y su extensión Drácula. Google tiene su propia biblioteca para hacer diagramas de flujo también.

Desafortunadamente, cada biblioteca establece una relación entre los nodos con una línea sigle. Si A y B tienen una relación con C, obtendré 2 líneas: una de A a C y una de B a C.

Lo que necesito es una línea de A a B (lo llamamos AB) y una línea de AB a C para representar el matrimonio de a y B.

example-image

Gracias.

Answer 1

Estoy teniendo el mismo problema. Esto es lo que he encontrado:

• http://chandler.prallfamily.com/2011/05/my-family-tree/
• http://www.headjump.de/article/arrows-and-boxes
• http://astuteo.com/slickmap/

¿Tiene alguna otra solución?

Answer 2

He diseñado un archivo de puntos Graphviz para producir tal salida. Actualmente estoy trabajando en un script Ruby para generar esto desde un archivo .gedcom.

Aquí los contenidos .dot, los nodos con números son solo puntos y fluyen los bordes de la manera correcta.

digraph G { 
    graph [nodesep=0.2,splines=ortho,ranksep=0.05] 
    node [shape=box,fontname=Helvetica,fontsize=8;color="green",fixedsize=true,width=1,height=0.5,style=filled] 
    Grandfather [color="lightblue"] 
    Grandmother [color="pink"] 
    StephGrandmother [color="pink"] 
    Father [color="lightblue"] 
    Mother [color="pink"] 
    Uncle [color="lightblue"] 
    Laurent [color="lightblue"] 
    Child2 [color="lightblue"] 
    Child3, Child4 [color="pink"] 
    node[label="", width=0, height=0]; 
    edge[arrowhead=none, color=blue]; 
    {rank=same;StephGrandmother;Grandfather;Grandmother;Grandfather1} 
    {rank=same;Father;Father1;Mother;Uncle} 
    {rank=same;Laurent;Child2;Child3,Child4} 
    {rank=same;Father2;Father3} 
    StephGrandmother:e -> Grandfather:w 
    Grandfather:e -> Grandfather1 
    Grandfather1 -> Grandmother:w 
    Grandfather1 -> Grandfather2 
    Grandfather2 -> Father:n 
    Grandfather2 -> Uncle:n 
    Father:e -> Father1 
    Father1 -> Mother:w 
    Father1 -> Father2 
    Father2:w -> Laurent:n 
    Father2:w -> Child2:n 
    Father2 -> Father3 
    Father3:e -> Child3:n 
    Father3:e -> Child4:n 
} 

Answer 3

Aunque no es una "biblioteca", existe una utilidad que le permite dibujar con precisión lo que usted describe. Llamado simplemente "SVG Utility", este es un software gratuito con un diseñador gráfico que le permite definir relaciones familiares reales (incluidos múltiples cónyuges, hijos tentativos, etc.). Ver More on SVG Family Trees.

Una vez diseñadas, las relaciones y el diseño se capturan en un formato de archivo de texto simple para que puedan ser modificados o reutilizados. La utilidad genera una versión SVG para usar en una publicación de blog u otra página web. Hay varias configuraciones posibles que permiten múltiples imágenes SVG en la misma página, información emergente o información emergente detrás de buzones de personas o "familias", zoom de árboles individuales, imágenes en miniatura junto con leyendas, etc.

El kit de instalación, la documentación y las muestras están disponibles en una carpeta de Dropbox. Póngase en contacto con el autor de la publicación de blog mencionada anteriormente para obtener acceso a ella.

La utilidad fue diseñada para ejecutarse bajo Windows, pero también se ha ejecutado bajo la capa de compatibilidad de WINE en una Mac.