Creazione di un albero pieghevole D3.js dai dati CSV

Questa potrebbe essere una domanda un po 'sciocca per quelli di voi più familiari con d3 ma sono abbastanza nuovo e non riesco a capire come ottenere questa cosa lavoro:Creazione di un albero pieghevole D3.js dai dati CSV

quello che sto cercando di realizzare è questo: http://bl.ocks.org/robschmuecker/7880033

Ma mi piacerebbe passare i dati da un file CSV piatto piuttosto che un JSON.

Il problema è che il CSV ho è formattato in questo modo:

Parent Name | Child Name 
 
------------------------- 
 
Parent Name | Child Name 
 
------------------------- 
 
Parent Name | Child Name 
 

 
so on...

Qualcuno potrebbe per favore mi punto nella giusta direzione? So che la funzione d3.csv funziona in qualche modo, ma non ho idea di come "inserirla" nell'esempio sopra.

Mi scuso, so che questo suona molto come "Faccio i compiti per me", ma ho onestamente dato un buon risultato e penso di essere bloccato.

Grazie. Apprezzato.

fonte

2015-01-12 Tim

Non ho visto ciò che si sta cercando prima, ma è una combinazione di creating a tree from flat data (che richiede un po 'di manipolazione dei dati per adattarlo alla struttura corretta) e lo standard loading data from and external source con d3.

~~Purtroppo io non sono in grado di impostare un bl.ock per voi per dimostrare il codice dal vivo,~~ EDIT: Here is a live version del codice in esecuzione su bl.ocks.org, e il seguente è il file html che è il combinazione delle due tecniche;

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 

 
    <title>Collapsible Tree Example</title> 
 

 
    <style> 
 

 
\t .node circle { 
 
\t fill: #fff; 
 
\t stroke: steelblue; 
 
\t stroke-width: 3px; 
 
\t } 
 

 
\t .node text { font: 12px sans-serif; } 
 

 
\t .link { 
 
\t fill: none; 
 
\t stroke: #ccc; 
 
\t stroke-width: 2px; 
 
\t } 
 
\t 
 
    </style> 
 

 
    </head> 
 

 
    <body> 
 

 
<!-- load the d3.js library --> \t 
 
<script src="http://d3js.org/d3.v3.min.js"></script> 
 
\t 
 
<script> 
 

 
// ************** Generate the tree diagram \t ***************** 
 
var margin = {top: 20, right: 120, bottom: 20, left: 120}, 
 
\t width = 960 - margin.right - margin.left, 
 
\t height = 500 - margin.top - margin.bottom; 
 
\t 
 
var i = 0; 
 

 
var tree = d3.layout.tree() 
 
\t .size([height, width]); 
 

 
var diagonal = d3.svg.diagonal() 
 
\t .projection(function(d) { return [d.y, d.x]; }); 
 

 
var svg = d3.select("body").append("svg") 
 
\t .attr("width", width + margin.right + margin.left) 
 
\t .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
\t .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
// load the external data 
 
d3.csv("treedata.csv", function(error, data) { 
 

 
// *********** Convert flat data into a nice tree *************** 
 
// create a name: node map 
 
var dataMap = data.reduce(function(map, node) { 
 
\t map[node.name] = node; 
 
\t return map; 
 
}, {}); 
 

 
// create the tree array 
 
var treeData = []; 
 
data.forEach(function(node) { 
 
\t // add to parent 
 
\t var parent = dataMap[node.parent]; 
 
\t if (parent) { 
 
\t \t // create child array if it doesn't exist 
 
\t \t (parent.children || (parent.children = [])) 
 
\t \t \t // add node to child array 
 
\t \t \t .push(node); 
 
\t } else { 
 
\t \t // parent is null or missing 
 
\t \t treeData.push(node); 
 
\t } 
 
}); 
 

 
    root = treeData[0]; 
 
    update(root); 
 
}); 
 

 
function update(source) { 
 

 
    // Compute the new tree layout. 
 
    var nodes = tree.nodes(root).reverse(), 
 
\t links = tree.links(nodes); 
 

 
    // Normalize for fixed-depth. 
 
    nodes.forEach(function(d) { d.y = d.depth * 180; }); 
 

 
    // Declare the nodesâ€¦ 
 
    var node = svg.selectAll("g.node") 
 
\t .data(nodes, function(d) { return d.id || (d.id = ++i); }); 
 

 
    // Enter the nodes. 
 
    var nodeEnter = node.enter().append("g") 
 
\t .attr("class", "node") 
 
\t .attr("transform", function(d) { 
 
\t \t return "translate(" + d.y + "," + d.x + ")"; }); 
 

 
    nodeEnter.append("circle") 
 
\t .attr("r", 10) 
 
\t .style("fill", "#fff"); 
 

 
    nodeEnter.append("text") 
 
\t .attr("x", function(d) { 
 
\t \t return d.children || d._children ? -13 : 13; }) 
 
\t .attr("dy", ".35em") 
 
\t .attr("text-anchor", function(d) { 
 
\t \t return d.children || d._children ? "end" : "start"; }) 
 
\t .text(function(d) { return d.name; }) 
 
\t .style("fill-opacity", 1); 
 

 
    // Declare the linksâ€¦ 
 
    var link = svg.selectAll("path.link") 
 
\t .data(links, function(d) { return d.target.id; }); 
 

 
    // Enter the links. 
 
    link.enter().insert("path", "g") 
 
\t .attr("class", "link") 
 
\t .attr("d", diagonal); 
 

 
} 
 

 
</script> 
 
\t 
 
    </body> 
 
</html>

Ed il seguente è il file CSV ho provato con (nome treedata.csv nel file HTML);

name,parent 
Level 2: A,Top Level 
Top Level,null 
Son of A,Level 2: A 
Daughter of A,Level 2: A 
Level 2: B,Top Level

Complimenti dovrebbero andare nrabinowitz per descrivere la trasformazione dei dati here.

fonte

2015-01-13 18:40:37 d3noob

Fantastico, grazie. Ho anche trovato questo esempio che utilizza anche lo stesso principio: https://gist.github.com/mbostock/2949981 – Tim

Ahh ... Ben fatto. Avrei potuto immaginare che Mike avrebbe descritto questo tempo in passato. – d3noob

Creazione di un albero pieghevole D3.js dai dati CSV

risposta

Problemi correlati