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