javascript - examples - d3 v4 js

¿Cómo muestro los matrimonios en un ''árbol genealógico'' basado en d3.js?

Question

Soy un desarrollador de HTML / CSS, investigando soluciones de JavaScript para construir un ''árbol genealógico'' que necesita mostrar matrimonios (desde fuera de la familia, por supuesto) de una manera significativa.

Esencialmente estoy buscando basarlo en un dendrograma, basado en d3.js, por ejemplo http://bl.ocks.org/4063570 , pero he tenido problemas para encontrar algo que exprese ''matrimonios''.

A continuación se muestra una imagen de los datos que voy a basar en:

¡Cualquier ayuda / sugerencia / enlace sería muy apreciada! Simplemente no sé si es posible, pero me encantaría usar d3.js, ya que se ve muy bien hecho y aparentemente versátil.

Answer 1

Esto necesita algo de trabajo, pero esencialmente la idea que propongo es hacer un diseño de fuerza con un tipo especial de nodo llamado relación que no dibuje un círculo. Representa el enlace entre dos sujetos y puede ser el padre de más nodos.

En d3 puede extender todas las estructuras de datos para que se ajusten a lo que desea, luego hay más trabajo para vincular los datos pero todo es personalizable. Aquí hay una muestra de las estructuras de datos que usaría en el diseño de la fuerza.

{
"nodes": [
{
"type": "root",
"x": 300,
"y": 300,
"fixed": true
},
{
"type": "male",
"name": "grandpa"
},
{
"type": "female",
"name": "grandma"
},
{
"type": "relationship"
},
{
"type": "male",
"name": "dad"
},
{
"type": "female",
"name": "mum"
},
{
"type": "relationship"
},
{
"type": "male",
"name": "I"
}
],
"links": [
{
"source": 0,
"target": 2
},
{
"source": 1,
"target": 2
},
{
"source": 0,
"target": 3
},
{
"source": 3,
"target": 4
},
{
"source": 4,
"target": 6
},
{
"source": 5,
"target": 6
},
{
"source": 6,
"target": 7
}
]
}

Espero haber aclarado algo sobre las posibilidades de d3.

Answer 2

Hay algunas opciones, pero creo que cada una requerirá un poco de trabajo. Ayudaría 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. Tal vez codificar en contra de su API sería una buena idea para la reutilización ...

- Árbol de pedigrí -

El árbol de pedigrí puede ser suficiente para sus necesidades. Harías que los parientes políticos se puedan enlazar, y si hicieras clic en su nombre, el gráfico se redibujaría para poder ver su linaje.

- Árbol de disposición del soporte -

Al igual que en el Árbol de árbol genealógico, pero bidireccional, este Árbol de diseño de paréntesis le permite manejar una vista tipo "Aquí están mis padres, abuelos, hijos, nietos". Al igual que el árbol genealógico, harías que los individuos 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 anteriores por encima o por debajo de las más nuevas.

- Cluster Dendogram (por qué falla) -

Los diseños d3.js que he visto que se prestan mejor a los árboles genealógicos suponen que un único 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 la familia política. Ajustar un dendograma de clúster para hacer esto debería ser factible, pero no sin modificaciones significativas.

Si usted, o cualquier otra persona para el caso, aborda esto, hágamelo saber. Me gustaría ver (y beneficiarme de) el trabajo y puedo contribuir si es factible.

Answer 3

También necesitaba dibujar pedigrí con D3, así que descubrí cómo. He creado ejemplos que muestran la funcionalidad básica y luego agrego funciones avanzadas como expandir y mostrar descendientes.

No sé cómo quieres mostrar matrimonios. Los matrimonios son inherentes a un pedigrí ancestral, pero no en una tabla de descendencia. El código podría adaptarse para mostrar cónyuges en los nodos descendientes.

Aquí hay una foto de cómo se ve. El estilo puede ajustarse según lo deseado.