Rev | Line | |
---|
[76] | 1 | var r = 960 / 2; |
---|
| 2 | |
---|
| 3 | var tree = d3.layout.tree() |
---|
| 4 | .size([360, r - 120]) |
---|
| 5 | .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; }); |
---|
| 6 | |
---|
| 7 | var diagonal = d3.svg.diagonal.radial() |
---|
| 8 | .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); |
---|
| 9 | |
---|
| 10 | var vis = d3.select("#chart").append("svg:svg") |
---|
| 11 | .attr("width", r * 2) |
---|
| 12 | .attr("height", r * 2 - 150) |
---|
| 13 | .append("svg:g") |
---|
| 14 | .attr("transform", "translate(" + r + "," + r + ")"); |
---|
| 15 | |
---|
| 16 | d3.json("../data/flare.json", function(json) { |
---|
| 17 | var nodes = tree.nodes(json); |
---|
| 18 | |
---|
| 19 | var link = vis.selectAll("path.link") |
---|
| 20 | .data(tree.links(nodes)) |
---|
| 21 | .enter().append("svg:path") |
---|
| 22 | .attr("class", "link") |
---|
| 23 | .attr("d", diagonal); |
---|
| 24 | |
---|
| 25 | var node = vis.selectAll("g.node") |
---|
| 26 | .data(nodes) |
---|
| 27 | .enter().append("svg:g") |
---|
| 28 | .attr("class", "node") |
---|
| 29 | .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) |
---|
| 30 | |
---|
| 31 | node.append("svg:circle") |
---|
| 32 | .attr("r", 4.5); |
---|
| 33 | |
---|
| 34 | node.append("svg:text") |
---|
| 35 | .attr("dx", function(d) { return d.x < 180 ? 8 : -8; }) |
---|
| 36 | .attr("dy", ".31em") |
---|
| 37 | .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) |
---|
| 38 | .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; }) |
---|
| 39 | .text(function(d) { return d.name; }); |
---|
| 40 | }); |
---|
Note: See
TracBrowser
for help on using the repository browser.