सीएसवी डेटा से डी 3.जेएस कोलासिबल ट्री बनाना

यह उन लोगों के लिए थोड़ा मूर्ख सवाल हो सकता है जो डी 3 से अधिक परिचित हैं लेकिन मैं इसके लिए काफी नया हूं और मैं यह नहीं समझ सकता कि यह चीज़ कैसे प्राप्त करें काम:सीएसवी डेटा से डी 3.जेएस कोलासिबल ट्री बनाना

यह क्या मैं प्राप्त करने के लिए कोशिश कर रहा हूँ है: http://bl.ocks.org/robschmuecker/7880033

लेकिन मैं इसे से ना कि सपाट सीएसवी एक JSON से डेटा को खिलाने के लिए चाहते हैं।

समस्या है कि सीएसवी मैं इतनी का प्रारूप ऐसा है:

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 का संयोजन है (जिसके लिए डेटा संरचना में थोड़ा सा सुधार करने की आवश्यकता है) और मानक loading data from and external source डी 3 के साथ।

~~दुर्भाग्य से मैं आप लाइव कोड,~~ संपादित करें प्रदर्शित करने के लिए के लिए एक bl.ock सेट करने में सक्षम नहीं कर रहा हूँ: bl.ocks.org पर चल रहा कोड का Here is a live version, और निम्न html फ़ाइल जो है दो तकनीकों का संयोजन;

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

और निम्नलिखित csv फ़ाइल मैं (html फ़ाइल में नाम treedata.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

सीएसवी डेटा से डी 3.जेएस कोलासिबल ट्री बनाना

उत्तर

संबंधित मुद्दे