May 14, 2013 22:21 · May 14, 2013
diff --git a/composite.js b/composite.js
@@ -0,0 +1,59 @@
+var force = d3.layout.force()
+  		.gravity(0.2)
+			.charge(-150)
+			.linkDistance(300)
+			.size([800, 600]);
+
+var svg = d3.select("body").append("svg:svg")
+	.attr("id","graph")
+	.attr("width", 800)
+	.attr("height", 600);
+var g = svg.append("svg:g");
+
+
+var mainObjects = [{name: "a"}, {name: "a2"}];
+var secondaryObjects = [{name: "b", belongsTo: "a"}, {name: "b1", belongsTo: "a2"}];
+
+var n=d3.values(mainObjects).concat(d3.values(secondaryObjects));
+var l=[{source: 0, target: 1}];
+
+var firstRectangles = g.append("svg:g").selectAll("rect.table")
+		.data(d3.values(mainObjects))
+	  .enter().append("svg:rect")
+		.attr("name", function(d) { return d.name;})
+		.call(force.drag);
+
+var secondRectangles = g.append("svg:g").selectAll("rect.table")
+		.data(d3.values(secondaryObjects))
+	  .enter().append("svg:rect")
+		.attr("name", function(d) { return d.name;})
+		.attr("stroke", "black")
+		.attr("fill", "transparent")
+		.call(force.drag);
+
+
+force
+	.nodes(n)
+	.links(l)
+	.on("tick", tick)
+	.start();
+
+
+function tick() {
+	firstRectangles.each(function(d,i) {
+		var x = d.x;
+		var y = d.y;
+		d3.select(this)
+		  .attr("width",40+50*i)
+		  .attr("height",80+10*i)
+		  .attr("x", this.x = x)
+		  .attr("y", this.y = y);
+
+		secondRectangles
+		  .filter(function(d2,i2) { return d2.belongsTo === d.name; })
+		  .attr("width",40+50*i)
+		  .attr("height",80+10*i)
+		  .attr("x",x+40+50*i)
+		  .attr("y",y+80+10*i);
+	});
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+    <title>test</title>
+
+    <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
+  </head>
+  <body>
+    <script type="text/javascript" src="composite.js"></script>
+  </body>
+</html>