CSVデータからD3.js折りたたみツリーを作成する

これは、d3に精通している人にとってはちょっとばかげた質問かもしれませんが、私はそれほど新しいことではありません。作品：CSVデータからD3.js折りたたみツリーを作成する

私が達成しようとしている何がこれです：http://bl.ocks.org/robschmuecker/7880033

しかし、私はそれをフラットCSVではなくJSONのデータを送りたいと思います。

問題は、CSV、私はそうのようにフォーマットされていることです：

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

 
so on...

は、誰かが正しい方向に私を指すしてくださいもらえますか？私はd3.csv関数が何らかの形で機能していることを知っていますが、上記の例にどのように「プラグイン」するのか分かりません。

私は謝罪しています。私は「私の宿題をやってください」のように聞こえますが、正直言ってそれは良いことだと思っています。

ありがとうございます。感謝。

出典

2015-01-12 Tim

私は以前あなたが探しているものは見ていませんでしたが、これはcreating a tree from flat data（正しい構造にフィニッシュするために少しのデータ操作が必要です）とd3の標準loading data from and external sourceです。

~~は、悲しいことに、私はあなたが生きてコードを実証するためのbl.ockを設定することはできないんだけど、~~ EDIT：bl.ocks.orgで実行中のコードのHere is a live version、と次のとおりであるHTMLファイルです2つの技術の組み合わせ。

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

そして次は、私が（htmlファイルの名前付きtreedata.csv）でそれをテストしたcsvファイルです。

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

賞賛は、データ変換hereを記述するためのnrabinowitzに行く必要があります。

出典

2015-01-13 18:40:37 d3noob

素晴らしいです、ありがとうございます。私はまた同じ原理を使ったこの例を見つけました：https://gist.github.com/mbostock/2949981 – Tim

ああ...うん。私は、マイクが過去にこのことについて何度か記述したと推測したかもしれない。 – d3noob

CSVデータからD3.js折りたたみツリーを作成する

答えて

関連する問題