Come convertire in formato JSON di D3?

Seguendo numerosi esempi D3, i dati vengono solitamente formattati nel formato indicato in flare.json :

{ "name": "flare", "children": [ { "name": "analytics", "children": [ { "name": "cluster", "children": [ {"name": "AgglomerativeCluster", "size": 3938}, : 

Ho un elenco di adiacenze come segue:

 A1 A2 A2 A3 A2 A4 

che voglio convertire nel formato sopra. Attualmente sto facendo questo sul lato server, ma c’è un modo per ottenere questo usando le funzioni di d3? Ne ho trovato uno qui , ma l’approccio sembra richiedere la modifica della libreria core d3 che non sono favorevole a causa della manutenibilità. Eventuali suggerimenti?

Non esiste un formato prescritto, in quanto è ansible ridefinire i dati in genere tramite varie funzioni di accesso (come hierarchy.children ) e array.map . Ma il formato che hai citato è probabilmente la rappresentazione più comoda per gli alberi perché funziona con i metodi di accesso predefiniti.

La prima domanda è se si intende visualizzare un grafico o un albero . Per i grafici, la struttura dei dati è definita in termini di nodes e collegamenti . Per gli alberi, l’input per il layout è il nodo radice, che può avere una matrice di nodes figli e i cui nodes foglia hanno un valore associato.

Se si desidera visualizzare un grafico e tutto ciò che si ha è un elenco di spigoli, allora si vorrà iterare oltre i bordi per produrre una serie di nodes e una serie di collegamenti. Supponiamo che tu abbia un file chiamato “graph.csv”:

 source,target A1,A2 A2,A3 A2,A4 

È ansible caricare questo file utilizzando d3.csv e quindi produrre una matrice di nodes e collegamenti:

 d3.csv("graph.csv", function(links) { var nodesByName = {}; // Create nodes for each unique source and target. links.forEach(function(link) { link.source = nodeByName(link.source); link.target = nodeByName(link.target); }); // Extract the array of nodes from the map by name. var nodes = d3.values(nodeByName); function nodeByName(name) { return nodesByName[name] || (nodesByName[name] = {name: name}); } }); 

È quindi ansible passare questi nodes e collegamenti al layout di forza per visualizzare il grafico:

Se si desidera invece produrre un albero , è necessario eseguire una forma leggermente diversa di trasformazione dei dati per accumulare i nodes figlio per ciascun genitore.

 d3.csv("graph.csv", function(links) { var nodesByName = {}; // Create nodes for each unique source and target. links.forEach(function(link) { var parent = link.source = nodeByName(link.source), child = link.target = nodeByName(link.target); if (parent.children) parent.children.push(child); else parent.children = [child]; }); // Extract the root node. var root = links[0].source; function nodeByName(name) { return nodesByName[name] || (nodesByName[name] = {name: name}); } }); 

Così:

D3 non richiede un formato specifico. Tutto dipende dalla tua applicazione. È sicuramente ansible convertire un elenco di adiacenza nel formato utilizzato in flare.json, ma questo sarebbe di nuovo il codice specifico dell’applicazione. In generale, non è ansible farlo come elenchi di adiacenza in quanto tali non hanno elementi “testa” o “radice” necessari per build un albero. Inoltre, dovrai gestire separatamente cicli, orfani, ecc.

Dato che stai facendo attualmente la conversione sul lato server, sarei tentato di dire che “se non è rotto, non aggiustarlo”;)