Tworzenie składanego drzewa D3.js z danych CSV

To może być nieco głupie pytanie dla tych z was, którzy lepiej znają d3, ale jestem całkiem nowy i nie mogę w pełni wymyślić, jak uzyskać to coś praca:Tworzenie składanego drzewa D3.js z danych CSV

Co staram się osiągnąć to: http://bl.ocks.org/robschmuecker/7880033

Ale chciałbym, żeby go nakarmić dane z płaskiej CSV, a nie JSON.

Problemem jest to, że mam CSV jest sformatowany tak:

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

 
so on...

Może ktoś proszę wskaż mnie we właściwym kierunku? Wiem, że funkcja d3.csv działa jakoś, ale nie mam pojęcia jak "podłączyć" do powyższego przykładu.

Przepraszam, wiem, że brzmi to jak "Odrób moją pracę domową dla mnie", ale szczerze powierzyłem mu dobry wynik i myślę, że utknąłem.

Dziękuję. Doceniony.

Źródło

2015-01-12 Tim

Nie widziałem tego, czego szukałeś wcześniej, ale jest to kombinacja creating a tree from flat data (która wymaga nieco manipulacji danymi, aby uzyskać finezję w odpowiedniej strukturze) oraz standardu loading data from and external source z d3.

~~Niestety nie jestem w stanie założyć bl.ock aby wykazać kod na żywo,~~ EDIT: Here is a live version z systemem kodu na bl.ocks.org, a następnego jest plik HTML, który jest połączenie obu technik;

<!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>

A Poniżej znajduje się plik CSV Testowałem go (o nazwie treedata.csv w pliku 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

Kudos powinien udać się do nrabinowitz opisujący transformację danych here.

Źródło

2015-01-13 18:40:37 d3noob

Fantastyczne, dziękuję. Znalazłem również ten przykład, który również używa tej samej zasady: https://gist.github.com/mbostock/2949981 – Tim

Ahh ... Dobra robota. Mogłem się domyślić, że Mike opisałby to kiedyś w przeszłości. – d3noob

Tworzenie składanego drzewa D3.js z danych CSV

Odpowiedz

Powiązane problemy