Cómo crear un árbol genealógico en d3.js?
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 de abajo.
Los mejores resultados de búsqueda hasta ahora para esto solo dieron ejemplos donde un hijo 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 (del hijo al enlace padre-madre). Actualmente no tengo un esquema de datos fijo para esto.
He elegido d3.js para este porque parece que sería capaz de hacer el trabajo. No sé cómo ni por dónde empezar. Tutoriales sobre d3.js solo cubre gráficos estándar como gráficos de barras.
Espero que alguien pueda ayudarme con esto.
6 answers
Mi enfoque es el siguiente:
Tomemos el ejemplo que ha ilustrado en la figura adjunta:
Jenny De Oldstones es también un hijo de Aegon V pero la diferencia entre este niño y otros niños de Aegon V, es que en este caso no estoy de dibujo el vínculo entre ella.
Esto se hace estableciendo el nodo como no_parent: true en el nodo JSON ejemplo:
//Here Q will not have a parent
{
name: "Q",
id: 16,
no_parent: true
}
En el código marque la función {[4] }_ esto hace el trabajo de no trazar 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 el
display:nonepara 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 compruebe 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, he hecho el uso de nombres de nodo A / B / C... pero puede cambiarlo según sus requisitos. Tendrá que centrar el texto.
He añadido comentarios al código para ayudarte a entender el flujo. Solo en caso de que no esté claro en cualquier punto, por favor comente que estaré encantado de aclarar.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-12 18:10:28
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 utiliza un formato de datos json simple:
[{
name: "Father",
marriages: [{
spouse: {
name: "Mother",
},
children: [{
name: "Child",
}]
}]
}]
Si está interesado en modificarlo, soporta callback para renderizado de nodos y controlador de eventos. Finalmente, la biblioteca está a partir de 2016 en desarrollo y las solicitudes de extracción son bienvenidas.
DESCARGO de RESPONSABILIDAD: Soy el autor de dTree. Yo he creado la biblioteca después de buscar en la web al igual que lo hizo y no encontrar nada a mi gusto.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-10 19:42:59
Las no tan buenas noticias: La investigación que he realizado muestra que no hay una biblioteca d3 lista para usar que logre esto directamente sin alguna personalización.
Las buenas noticias: Ha habido algunas otras personas que han investigado esto y han encontrado algunos grandes puntos de partida! Me doy cuenta de que esto no es una solución completa para toda la tarea en cuestión, pero parece de su pregunta que una gran parte de su dificultad hasta ahora ha sido simplemente averiguar por dónde empezar (por ejemplo, "Tutoriales sobre d3.js solo cubre gráficos estándar como gráficos de barras."). A falta de algo mejor, al menos responderé a esa parte aquí.
Primero, en la respuesta a este post relacionado con stackoverflow de hace unos años, inanutshellus proporciona algunas excelentes herramientas d3 que están disponibles y podrían ser útiles aquí. Con un poco de personalización/extensión de luz, deberían ser capaces de llegar a donde vas con relativa rapidez. 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 que hubiera un único estándar para representar un árbol genealógico en JSON. He notado recientemente que geni.com tiene un API en profundidad para esto. Tal vez codificar contra su API sería un buena idea para la reutilización...
Tree Árbol genealógico {
El Árbol Genealógico podría ser suficiente para tus necesidades. Usted haría en-ley enlazable, donde si hacías clic en su nombre el gráfico se redibujaría para que pudieras ver su linaje.
Tree Árbol de Distribución de Corchetes {
Similar al Árbol Pedigrí, pero bidireccional, este Árbol de Distribución de Corchetes le permite manejar un " aquí están mis padres, abuelos, niños, nietos " tipo de vista. Al Igual que el Árbol de Pedigrí, que haría individuos enlazables para volver a centrar el soporte en ese nodo.
Based Basado en la fuerza Diseño --
Hay algunos diseños interesantes basados en la fuerza que parecen prometedores. Echa un vistazo a este ejemplo de un diseño basado en la fuerza con etiquetas inteligentes . Un ajuste a la algoritmo de cómo se determina la" fuerza " podría hacer esto en un árbol muy bonito, con generaciones mayores por encima o por debajo de las nuevas.
D Dendograma de clúster (por qué falla) {
El d3.diseños de js que he visto que se prestarían mejor a la familia los árboles asumen una el nodo único es el padre, mientras que usted necesita representar el padre como la combinación de (visualmente una " T " entre) dos nodos: un nodo que es un miembro de su árbol, y uno flotante nodo que representa a la familia política. Ajustar un dendograma de clúster para hacer esto debería ser factible, pero no sin modificaciones significativas.
Si usted tackle o cualquier otra persona para el caso tackle abordar esto, házmelo saber. Yo gusta ver (y beneficio) del trabajo y puede ser capaz de contribuir si factible.
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, por suerte 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 un poco más de granular "clickability" a cada nodo.
Otra vez, no es nada automagic pero esperemos que estos recursos son suficientes para obtener un gran comienzo!
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:18:25
Probé 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 su lugar, 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 junto al otro: Para superar esta limitación, ajusté el JSON para combinar cónyuges en una entidad (por ejemplo: "esposo - esposa" ) justo antes de enviarlo al árbol.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-02 18:17:52
Sé que esta pregunta es bastante antigua, pero si alguien todavía está interesado, por favor eche un vistazo a mi muestra aquí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-15 17:59:50
No se si esto es de alguna ayuda para ti, porque dijiste que ibas a usar d3.js pero hay otra herramienta que usted puede ser que desee mirar en el uso llamado jsplumb. Parece perfecto para este tipo de proyectos: página de inicio. También tienen algunos tutoriales decentes. Hay uno más como docs, y otro más interactiva.
Como dije, si no es demasiado tarde para cambiar de tecnología, vale la pena intentarlo. Todo es html, css y javascript, así que no debería ser una transición dura.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-26 09:01:06