javascript - Produce a bundle layout with a csv file -
i'm trying produce bundle layout , managed it. however, i'd able use simple csv field instead of json. i've tried replace d3.json d3.csv function can't make work.
any idea?
my code: http://plnkr.co/edit/0hwljmehnyjqhucpdw5w
<!doctype html> <meta charset="utf-8"> <style> .node { font: 300 11px "helvetica neue", helvetica, arial, sans-serif; fill: #bbb; } .node:hover { fill: #000; } .link { stroke: steelblue; stroke-opacity: .4; fill: none; pointer-events: none; } .node:hover, .node--source, .node--target { font-weight: 700; } .node--source { fill: #2ca02c; } .node--target { fill: #d62728; } .link--source, .link--target { stroke-opacity: 1; stroke-width: 2px; } .link--source { stroke: #d62728; } .link--target { stroke: #2ca02c; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <div> <script> var diameter = 480, // diameter = 960 ou 480 radius = diameter / 2, innerradius = radius - 120; var cluster = d3.layout.cluster() .size([360, innerradius]) .sort(null) .value(function(d) { return d.size; }); var bundle = d3.layout.bundle(); var line = d3.svg.line.radial() .interpolate("bundle") .tension(.85) .radius(function(d) { return -d.y; }) .angle(function(d) { return d.x / 180 * math.pi; }); var svg = d3.select("body").append("svg") .attr("width", diameter) .attr("height", diameter) .append("g") .attr("transform", "translate(" + radius + "," + radius + ")"); var link = svg.append("g").selectall(".link"), node = svg.append("g").selectall(".node"); d3.json("test.json", function(error, classes) { var nodes = cluster.nodes(packagehierarchy(classes)), links = packagelinks(nodes); // links = packageimports(nodes); link = link .data(bundle(links)) .enter().append("path") .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; }) .attr("class", "link") .attr("d", line); node = node .data(nodes.filter(function(n) { return !n.children; })) // add url on each link .enter().append('a') .attr("xlink:href", function(d){return d.url;}) .append("text") .attr("class", "node") .attr("dy", ".31em") // put parents on left rather on right .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + ((-d.y) - 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); }) //.attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); }) .style("text-anchor", function(d) { return d.x < 180 ? "end" : "start"; }) .text(function(d) { return d.key }) .on("mouseover", mouseovered) .on("mouseout", mouseouted); }); function mouseovered(d) { node .each(function(n) { n.target = n.source = false; }); link .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; }) .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; }) .filter(function(l) { return l.target === d || l.source === d; }) .each(function() { this.parentnode.appendchild(this); }); node .classed("node--target", function(n) { return n.target; }) .classed("node--source", function(n) { return n.source; }); } function mouseouted(d) { link .classed("link--target", false) .classed("link--source", false); node .classed("node--target", false) .classed("node--source", false); } d3.select(self.frameelement).style("height", diameter + "px"); // lazily construct package hierarchy class names. function packagehierarchy(classes) { var map = {}; function find(name, data) { var node = map[name], i; if (!node) { node = map[name] = data || {name: name, children: []}; if (name.length) { node.parent = find(name.substring(0, = name.lastindexof("."))); node.parent.children.push(node); node.key = name.substring(i + 1); } } return node; } classes.foreach(function(d) { find(d.name, d); }); return map[""]; } // return list of imports/links given array of nodes. function packagelinks(nodes) { //function packageimports(nodes) { var map = {}, links = []; // imports = []; // compute map name node. nodes.foreach(function(d) { map[d.name] = d; }); // each import/link, construct link source target node. nodes.foreach(function(d) { if (d.links) d.links.foreach(function(i) { //if (d.imports) d.imports.foreach(function(i) { links.push({source: map[d.name], target: map[i]}); //imports.push({source: map[d.name], target: map[i]}); }); }); return links; //return imports; } </script> </div> test.json file:
[ {"name":"brut.smith.grandpa","url":"http://www.google.com","tooltip":"lorem","links":["brut.smith.grandpa"]}, {"name":"brut.smith.daddy","url":"http://www.gmail.com","tooltip":"ipsum","links":["brut.smith.grandpa"]}, {"name":"brut.smith.mummy","url":"http://www.yahoo.com","tooltip":"dolor","links":["brut.smith.mummy"]}, {"name":"pmu.smithkid.peter","url":"http://www.microsoft.com","tooltip":"sit","links":["brut.smith.daddy", "brut.smith.mummy"]}, {"name":"pmu.smithkid.simon","url":"http://www.google.fr","tooltip":"amet","links":["brut.smith.daddy", "brut.smith.mummy"]}, {"name":"brut.martin.uncle","url":"https://github.com/mbostock/d3/wiki/csv","tooltip":"consectetur","links":["brut.martin.uncle"]}, {"name":"brut.martin.aunt","url":"http://bl.ocks.org/mbostock/7607999","tooltip":"elit","links":["brut.martin.aunt"]}, {"name":"pmu.martinkid.mathis","url":"http://stackoverflow.com/","tooltip":"lorem","links":["brut.martin.uncle", "brut.martin.aunt"]}, {"name":"pmu.martinkid.adrien","url":"htpp://www.microsoft.com","tooltip":"ipsum","links":["brut.martin.uncle", "brut.martin.aunt"]}, {"name":"pmu.martinkid.chloé","url":"http://www.d3js.org","tooltip":"dolor","links":["brut.martin.uncle", "brut.martin.aunt"]} ] test.csv file:
name;url;tooltip;links parent.smith.grandpa;http://www.google.com;lorem;[parent.smith.grandpa] parent.smith.daddy;http://www.gmail.com;ipsum;[parent.smith.grandpa] parent.smith.mummy;http://www.yahoo.com;dolor;[parent.smith.mummy] child.smithkid.peter;http://www.microsoft.com;sit;[parent.smith.daddy, parent.smith.mummy] child.smithkid.simon;http://www.google.fr;amet;[parent.smith.daddy, parent.smith.mummy] parent.martin.uncle;https://github.com/mbostock/d3/wiki/csv;consectetur;[parent.martin.uncle] parent.martin.aunt;http://bl.ocks.org/mbostock/7607999;adipiscing;[parent.martin.aunt] child.martinkid.mathis;http://stackoverflow.com/;elit;[parent.martin.uncle, parent.martin.aunt] child.martinkid.adrian;htpp://www.microsoft.com;lorem;[parent.martin.uncle, parent.martin.aunt] child.martinkid.chloé;http://www.d3js.org;ipsum;[parent.martin.uncle, parent.martin.aunt]
Comments
Post a Comment