--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/force/force-bounds.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Force-Directed Layout</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.geom.js"></script>
+ <script type="text/javascript" src="../../d3.layout.js"></script>
+ <style type="text/css">
+
+circle {
+ stroke-width: 1.5px;
+}
+
+line {
+ stroke: #999;
+}
+
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+var w = 960,
+ h = 500,
+ r = 6,
+ fill = d3.scale.category20();
+
+var force = d3.layout.force()
+ .gravity(.01)
+ .charge(-120)
+ .linkDistance(30)
+ .size([w, h]);
+
+var svg = d3.select("body").append("svg:svg")
+ .attr("width", w)
+ .attr("height", h);
+
+d3.json("miserables.json", function(json) {
+ var link = svg.selectAll("line")
+ .data(json.links)
+ .enter().append("svg:line");
+
+ var node = svg.selectAll("circle")
+ .data(json.nodes)
+ .enter().append("svg:circle")
+ .attr("r", r - .75)
+ .style("fill", function(d) { return fill(d.group); })
+ .style("stroke", function(d) { return d3.rgb(fill(d.group)).darker(); })
+ .call(force.drag);
+
+ force
+ .nodes(json.nodes)
+ .links(json.links)
+ .on("tick", tick)
+ .start();
+
+ function tick() {
+ node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); })
+ .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); });
+
+ link.attr("x1", function(d) { return d.source.x; })
+ .attr("y1", function(d) { return d.source.y; })
+ .attr("x2", function(d) { return d.target.x; })
+ .attr("y2", function(d) { return d.target.y; });
+ }
+});
+
+ </script>
+ </body>
+</html>