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"}
]
}
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:
La parte inferiore indica una configurazione desiderata del visivo (funzione simile a quella nell'immagine in alto).
Avete qualche suggerimento su come procedere?
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