Costruire grafici orientati alla forza solo da dati di collegamento

Question

Sono un po 'nuovo a d3.js, ma mi sto divertendo un po'. Finora, ho implementato un grafico orientato alla forza che è molto vicino a molti degli esempi e delle esercitazioni disponibili.

riguardano direttamente

Come molti degli esempi, che hanno una struttura JSON come questo:

{"nodes": ["node1", "node2", ... ], 
"links": [{source: 0, target: 1, "field1": 5, ...}, ... ]} 

Tuttavia, credo che sarebbe stato più facile costruire le mie fonti di dati in questo modo:

{"links": [ 
    {source: "node1", target: "node2", "field1": 5, ...}, 
    {source: "node2", target: "node4", "field1": 1, ...}, 
    {source: "node3", target: "node4", "field1": 8, ...} 
]} 

Invece di definire esplicitamente i nodi nel mio grafico, sono implicitamente definiti nelle strutture di collegamento.

The Reason

ho voluto elencare l'obiettivo finale del progetto nel caso in cui qualcuno ha avuto qualche esempio di codice specifico o modo idiomatico di fare questo, di cui non sono a conoscenza.

L'obiettivo del progetto potrebbe essere un grafico che si aggiorna in tempo reale. Il back-end è in fase di sviluppo ed è soggetto ad alcuni cambiamenti e revisioni.

Al momento, sto immaginando di tirare giù un aggiornamento JSON feed ogni X secondi e aggiornare la struttura di quel grafico con le nuove informazioni. Il feed estratto conteneva solo le strutture aggiornate del grafico, quindi lo script avrebbe bisogno di mantenere tutti i nodi e i collegamenti già estratti e aggiungere eventuali nuovi, se necessario.

Grazie!

Mi scuso se questo è stato chiesto prima. Ho fatto qualche ricerca e non ho trovato nulla. Sentiti libero di insultarmi e rimproverarmi se mi manca.

Answer 1

ho dovuto fare questo un paio di volte. L'approccio più semplice che ho trovato è stato quello di calcolare semplicemente il set di nodi base don l'elenco di collegamenti e quindi trasformarlo in un array per il grafico della forza da utilizzare:

var links = [ .... ]; 
var nodeMap = {}; 
links.forEach(function(d, i) { 
    nodeMap[d.source] = true; 
    nodeMap[d.target] = true; 
}); 

var nodes = []; 
for (key in nodeMap) 
    nodes.push(key); 

d3.layout.force() 
     .nodes(nodes) 
     .links(links); 

Answer 2

Ho fatto proprio questo nell'esempio "D3 Based Force Directed Radial Graph". Lo faccio perché voglio capire come i dati vengono utilizzati, internamente, indipendentemente da strutture come JSON e CSV, che possono essere sempre sovrapposte, in un secondo momento.

In ogni caso, spero che l'esempio ti aiuti.

My Best,

Frank