javascript d3.js charts family-tree genealogy

javascript - ¿Cómo se crea un árbol genealógico en d3.js?



charts family-tree (6)

Actualmente estoy trabajando en un pequeño experimento de genealogía y me gustaría implementar un árbol genealógico simple como en la imagen a continuación.

Los mejores resultados de búsqueda hasta ahora para esto solo arrojaron ejemplos en los que un niño solo puede tener un nodo padre. Pero lo que necesito es la capacidad de crear enlaces entre entidades (de padre a madre) y enlaces entre nodos y otros enlaces (de niño a padre-madre). Actualmente no tengo un esquema de datos fijo para esto.

d3.js para esto porque parece que sería capaz de hacer el trabajo . Simplemente no sé cómo ni siquiera por dónde empezar. Los tutoriales sobre d3.js solo cubren gráficos estándar como gráficos de barras.

Espero que alguien pueda ayudarme con esto.

Mi enfoque es el siguiente:

Tomemos el ejemplo que ha ilustrado en la figura adjunta:

Jenny Of Oldstones también es hija de Aegon V, pero la diferencia entre este niño y otros hijos de Aegon V es que en este caso no estoy trazando el vínculo entre ellos.

Esto se hace configurando el nodo como no_parent: true en el ejemplo JSON del nodo:

//Here Q will not have a parent { name: "Q", id: 16, no_parent: true }

En el código, marque la función _elbow esto hace el trabajo de no dibujar la línea entre él y su padre:

if (d.target.no_parent) { return "M0,0L0,0"; }

El siguiente escenario es el enlace que va entre el Nodo Aerys II y Rahella. Este nodo tiene su conjunto de hijos.

  • He creado un nodo entre ellos que está marcado como hidden: true,
  • Hago la display:none para tal nodo. Parece que los niños vienen de la línea entre el nodo Aerys II y Rahella

JSON Ejemplo:

//this node will not be displayed { name: "", id: 2, no_parent: true, hidden: true, children: [....] }

En el código, verifique el lugar donde hago los rectángulos, el siguiente código oculta el nodo:

.attr("display", function (d) { if (d.hidden) { return "none" } else { return "" }; })

El código completo está aquí: http://jsfiddle.net/cyril123/0vbtvoon/22/

En el ejemplo anterior, utilicé los nombres de nodo A / B / C ... pero puede cambiarlo según sus requisitos. Deberá centrar el texto.

He agregado comentarios al código para ayudarlo a comprender el flujo. En caso de que no tenga claro algún punto, por favor comente, me complacerá aclararlo.

No sé si esto te sirve de ayuda, porque dijiste que ibas a usar d3.js pero hay otra herramienta que quizás quieras considerar llamada jsplumb. Parece perfecto para este tipo de proyecto: página de inicio . También tienen algunos tutoriales decentes. Hay uno más como documentos , y otro más interactivo .

Como dije, si no es demasiado tarde para cambiar de tecnología, vale la pena intentarlo. Todo es html, css y javascript, por lo que no debería ser una transición dura.

dTree y me gustó. Sin embargo, cuando agrega varias generaciones, la pantalla horizontal puede hacer que la pantalla general sea muy grande y difícil de manejar. En cambio, usé el árbol Reingold-Tilford . Una desventaja de este árbol es que cada nodo puede tener solo un padre: los cónyuges no se pueden mostrar uno al lado del otro: para superar esta limitación, modifiqué el JSON para combinar cónyuges en una entidad (por ejemplo, "esposo - esposa") justo antes de enviar al árbol

dTree es una biblioteca de código abierto construida sobre D3 que crea árboles genealógicos (o gráficos jerárquicos similares).

Maneja las partes molestas de generar el gráfico D3 manualmente y usa un formato de datos json simple:

[{ name: "Father", marriages: [{ spouse: { name: "Mother", }, children: [{ name: "Child", }] }] }]

Si está interesado en modificarlo, admite la devolución de llamada para la representación de nodos y el controlador de eventos. Finalmente, la biblioteca está en desarrollo en 2016 y las solicitudes de extracción son bienvenidas.

DESCARGO DE RESPONSABILIDAD: Soy el autor de dTree. Creé la biblioteca después de buscar en la web como lo hiciste y no encontraste nada de mi agrado.

La noticia no es tan buena: la investigación que he realizado muestra que no hay una biblioteca d3 lista para usar que lo logre directamente sin alguna personalización.

La buena noticia: ¡ ha habido otras personas que han investigado esto y han encontrado excelentes puntos de partida! Me doy cuenta de que esta no es una solución completa para toda la tarea en cuestión, pero parece que a partir de su pregunta, una gran parte de su dificultad hasta ahora ha sido simplemente averiguar por dónde comenzar (por ejemplo, "Los tutoriales sobre d3.js solo cubren el estándar gráficos como gráficos de barras "). En ausencia de algo mejor, al menos responderé a esa parte aquí.

Primero, en respuesta a esta publicación relacionada de de hace unos años, inanutshellus proporciona algunas herramientas excelentes de d3 que están disponibles y podrían ser útiles aquí. Con una ligera personalización / extensión, deberían poder llevarte a donde vas relativamente rápido. Para la posteridad, la respuesta de inanutshellus se reproduce aquí:

Hay algunas opciones, pero creo que cada una requeriría un poco de trabajo. Sería útil si hubiera un único estándar para representar un árbol genealógico en JSON. Recientemente me di cuenta de que geni.com tiene una API bastante profunda para esto. Quizás codificar contra su API sería una buena idea para la reutilización ...

- Árbol genealógico -

El árbol genealógico podría ser suficiente para sus necesidades. Haría que los suegros se vinculen, donde si hace clic en su nombre, el gráfico se volverá a dibujar para que pueda ver su linaje.

- Árbol de diseño de soporte -

Similar al árbol de pedigrí, pero bidireccional, este árbol de diseño de soporte le permite manejar una vista tipo "aquí están mis padres, abuelos, hijos, nietos". Al igual que el árbol genealógico, haría que las personas puedan vincularse para volver a centrar el soporte en ese nodo.

- Diseño basado en la fuerza -

Hay algunos diseños interesantes basados ​​en la fuerza que parecen prometedores. Eche un vistazo a este ejemplo de un diseño basado en la fuerza con etiquetas inteligentes . Un ajuste en el algoritmo de cómo se determina la "fuerza" podría convertirlo en un árbol encantador, con generaciones más antiguas por encima o por debajo de las nuevas.

- Dendograma de clúster (por qué falla) -

Los diseños de d3.js que he visto que se prestarían mejor a los árboles genealógicos suponen que un solo nodo es el padre, mientras que debe representar al padre como la combinación de (visualmente una "T" entre) dos nodos: un nodo que es un miembro de su árbol y un nodo flotante que representa a los suegros. Ajustar un dendograma de clúster para hacer esto debería ser factible, pero no sin una modificación significativa.

Si usted, o cualquier otra persona, aborda esto, avíseme. Me gustaría ver (y beneficiarme) el trabajo y, si es posible, puedo contribuir con él.

En términos de implementación concreta, mj8591 hizo esta pregunta con respecto a un árbol genealógico similar con un problema diferente. Sin embargo, afortunadamente para usted, esa pregunta incluye un violín (todo el código js) que tiene la mayoría o todos los componentes que necesita, y la respuesta de mdml incluye otro violín que agrega una "capacidad de clic" más granular a cada nodo.

Una vez más, no es nada automático, ¡pero espero que estos recursos sean suficientes para que tengas un buen comienzo!