|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Force-Directed Layout (Multiple Foci)</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <script type="text/javascript" src="../../d3.geom.js"></script> |
|
7 <script type="text/javascript" src="../../d3.layout.js"></script> |
|
8 </head> |
|
9 <body> |
|
10 <div id="chart"></div> |
|
11 <script type="text/javascript"> |
|
12 |
|
13 var w = 960, |
|
14 h = 500, |
|
15 fill = d3.scale.category10(), |
|
16 nodes = d3.range(100).map(Object); |
|
17 |
|
18 var vis = d3.select("#chart").append("svg:svg") |
|
19 .attr("width", w) |
|
20 .attr("height", h); |
|
21 |
|
22 var force = d3.layout.force() |
|
23 .nodes(nodes) |
|
24 .links([]) |
|
25 .size([w, h]) |
|
26 .start(); |
|
27 |
|
28 var node = vis.selectAll("circle.node") |
|
29 .data(nodes) |
|
30 .enter().append("svg:circle") |
|
31 .attr("class", "node") |
|
32 .attr("cx", function(d) { return d.x; }) |
|
33 .attr("cy", function(d) { return d.y; }) |
|
34 .attr("r", 8) |
|
35 .style("fill", function(d, i) { return fill(i & 3); }) |
|
36 .style("stroke", function(d, i) { return d3.rgb(fill(i & 3)).darker(2); }) |
|
37 .style("stroke-width", 1.5) |
|
38 .call(force.drag); |
|
39 |
|
40 vis.style("opacity", 1e-6) |
|
41 .transition() |
|
42 .duration(1000) |
|
43 .style("opacity", 1); |
|
44 |
|
45 force.on("tick", function(e) { |
|
46 |
|
47 // Push different nodes in different directions for clustering. |
|
48 var k = 6 * e.alpha; |
|
49 nodes.forEach(function(o, i) { |
|
50 o.x += i & 2 ? k : -k; |
|
51 o.y += i & 1 ? k : -k; |
|
52 }); |
|
53 |
|
54 node.attr("cx", function(d) { return d.x; }) |
|
55 .attr("cy", function(d) { return d.y; }); |
|
56 }); |
|
57 |
|
58 d3.select("body").on("click", function() { |
|
59 nodes.forEach(function(o, i) { |
|
60 o.x += (Math.random() - .5) * 40; |
|
61 o.y += (Math.random() - .5) * 40; |
|
62 }); |
|
63 force.resume(); |
|
64 }); |
|
65 |
|
66 </script> |
|
67 </body> |
|
68 </html> |