Diagramma della forza gerarchica con D3.js

Vorrei generare un diagramma di forza gerarchico usando D3.js - un grafico orientato alla forza che consente di navigare in una struttura ad albero facendo clic sui nodi espandendo il grafico a livello di figli (dove sono mostrate le relazioni tra i bambini). I nodi possono essere correlati l'uno all'altro in due modi: genitore o fratello. La relazione genitore indica che i nodi "appartengono" al loro genitore.Diagramma della forza gerarchica con D3.js

Come punto di partenza ho esaminato l'esempio del cluster di forze: https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html e ho incluso le relazioni precedenti ma non riesco a capire come eseguire il rendering solo del cluster espanso e non dell'intera rete (vedere l'immagine sotto).

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

Sopra: Schema di forza, dove i collegamenti rosse indicano il rapporto di pari livello.

Sarebbe anche possibile organizzare i "bambini" come i bambini in JSON, invece di utilizzare il genitore "tipo":

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

Tuttavia, come si fa poi unire la struttura ad albero, mantenendo traccia delle relazioni tra i nodi figli?

Una struttura ad albero fantasiosa sarà simile: Tree

La parte inferiore indica una configurazione desiderata del visivo (funzione simile a quella nell'immagine in alto).

Avete qualche suggerimento su come procedere?

fonte

2012-10-03 graphmeter

Ho avuto un problema simile. Volevo mostrare la rete locale attorno a un nodo su cui è stato fatto clic da un set di dati di grandi dimensioni. La mia soluzione potrebbe fornirti alcuni suggerimenti: timebandit.github.io/graphSub – timebandit

In modo implicito, tutti i nodi con lo stesso padre diretto sono fratelli. Pertanto, non è necessario monitorare ulteriormente se i nodi sono fratelli o non fratelli.

Se vi capita di avere nodi che sono solo collegati ad altri nodi fratelli ma che non hanno un genitore (come la relazione tra Persona 0 e Persona 1 nell'esempio), il layout dell'albero non è la scelta giusta. Invece, potresti voler provare il layout della forza.

fonte

2014-05-02 12:40:53 Elvis

Diagramma della forza gerarchica con D3.js

risposta

Problemi correlati