Diagrama de fuerza jerárquica usando D3.js

Me gustaría generar un diagrama de fuerzas jerárquicas usando D3.js - un gráfico de fuerza dirigida que le permite navegar en una estructura similar a un árbol haciendo clic en nodos expandiendo el gráfico al nivel secundario (donde se muestran las relaciones entre los niños). Los nodos se pueden relacionar entre sí de dos maneras, padre o hermano. La relación principal indica que los nodos "pertenecen" a su padre.Diagrama de fuerza jerárquica usando D3.js

Como punto de partida, he consultado el ejemplo del clúster de fuerzas: https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html, e incluí las relaciones anteriores pero no puedo entender cómo renderizar el clúster expandido y no toda la red (ver imagen a continuación).

JSON data: 
{"nodes": 
     [ 
     {"name":"Person 0","group":"Person 0"}, 
     {"name":"Person 1","group":"Person 1"}, 
     {"name":"Person 2","group":"Person 1"}, 
     {"name":"Person 3","group":"Person 1"},  
     {"name":"Person 4","group":"Person 3"}, 
     {"name":"Person 5","group":"Person 3"} 
     ], 
"links": 
     [ 
     {"source":1,"target":0,"type":"sibling"}, 
     {"source":2,"target":1,"type":"parent"}, 
     {"source":3,"target":1,"type":"parent"}, 
     {"source":3,"target":2,"type":"sibling"}, 
     {"source":4,"target":3,"type":"parent"}, 
     {"source":5,"target":3,"type":"parent"}, 
     {"source":4,"target":5,"type":"sibling"} 
     ] 
}

Expanding cluster

Arriba: diagrama de fuerzas, donde los enlaces rojos indican la relación entre hermanos.

También sería posible disponer los "niños" como niños en el JSON, en lugar de utilizar la matriz "type":

{ 
"nodes": [ 
    { 
     "name": "Person 0", 
    }, 
    { 
     "name": "Person 1", 
     "children": [ 
      { 
       "name": "Person 2", 
      }, 
      { 
. 
. 
. 
"links": [ 
    { 
     "source": 1, 
     "target": 0 
    }, 
. 
.

Sin embargo, ¿cómo se combinan la estructura de árbol, manteniendo seguimiento de las relaciones entre los nodos de los niños?

Una estructura en forma de árbol imaginativa se vería así: Tree

La sección inferior indica un diseño deseado de lo visual (función similar a la de la imagen superior).

¿Tiene alguna sugerencia de cómo proceder?

Fuente

2012-10-03 graphmeter

Tuve un tipo similar de problema. Quería mostrar la red local alrededor de un nodo al que se hizo clic desde un gran conjunto de datos. Mi solución podría proporcionarle algunos consejos: timebandit.github.io/graphSub – timebandit

Implícitamente, todos los nodos con el mismo padre directo son hermanos. Por lo tanto, no debería ser necesario realizar un seguimiento adicional de si los nodos son hermanos entre sí o no.

Si tienes nodos que solo están relacionados con otros nodos hermanos pero no tienen padres (como la relación entre Persona 0 y Persona 1 en tu ejemplo), el diseño del árbol no es la opción correcta. En su lugar, es posible que desee probar el diseño de la fuerza.

Fuente

2014-05-02 12:40:53 Elvis

Diagrama de fuerza jerárquica usando D3.js

Respuesta

Cuestiones relacionadas