Verificamos de forma profundamente cada secciones en nuestra web con el objetivo de mostrarte en todo momento información con la mayor veracidad y certera.
Solución:
Mi enfoque es el siguiente:
Tomemos el ejemplo que ha ilustrado en la figura adjunta:
Jenny de piedras antiguas también es 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 estableciendo el vínculo entre ellos.
Esto se hace configurando el nodo como no_parent: true en el ejemplo del nodo JSON:
//Here Q will not have a parent
name: "Q",
id: 16,
no_parent: true
En el código, compruebe el _elbow function_ 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 Node 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 provienen de la línea entre el nodo Aerys II y Rahella
Ejemplo JSON:
//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, he utilizado 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, estaré encantado de aclararlo.
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 devolución de llamada para la representación de nodos y el controlador de eventos. Finalmente, la biblioteca está en desarrollo a partir de 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 tú lo hiciste y no encontrar nada de mi agrado.
Las noticias no tan buenas: La investigación que he realizado muestra que no existe una biblioteca d3 lista para usar que logre esto directamente sin alguna personalización.
los bien Noticias: ¡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 su pregunta parece que una gran parte de su dificultad hasta ahora ha sido simplemente averiguar por dónde empezar (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 con stackoverflow de hace unos años, inanutshellus proporciona algunas excelentes herramientas de d3 que están disponible y podría ser de utilidad aquí. Con un poco de personalización / extensión ligera, deberían poder llevarlo a su destino 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 si hubiera un solo estándar para representar un árbol genealógico en JSON. Recientemente me di cuenta de que geni.com tiene una API bastante detallada para esto. Quizás codificar contra su API sería una buena idea para la reutilización …
– árbol de pedigrí –
El árbol genealógico puede ser suficiente para sus necesidades. Haría que los suegros se pudieran vincular, donde si hacía clic en su nombre, el gráfico se volvería a dibujar para que pudiera ver su linaje.
– Árbol de diseño de soportes –
Similar al árbol genealógico, pero bidireccional, este árbol de diseño de soportes le permite manejar una vista de tipo “aquí están mis padres, abuelos, hijos, nietos”. Al igual que el árbol genealógico, haría que las personas pudieran vincularse para volver a centrar el soporte en ese nodo.
– Diseño basado en 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 al algoritmo de cómo se determina la “fuerza” podría convertir esto en un árbol muy hermoso, con las generaciones más antiguas por encima o por debajo de las nuevas.
– Cluster Dendogram (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 racimo para hacer esto debería ser factible, pero no sin modificaciones significativas.
Si usted, o cualquier otra persona, aborda esto, hágamelo saber. Me gustaría ver (y beneficiarme) del trabajo y podría contribuir a él si es posible.
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 un poco de “clickability” más granular a cada nodo.
Una vez más, no es nada automático, pero con suerte estos recursos son suficientes para que tengas un gran comienzo.
Si piensas que te ha resultado útil nuestro post, sería de mucha ayuda si lo compartieras con otros entusiastas de la programación así contrubuyes a dar difusión a esta información.