knolleary · December 11, 2015 07:38
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
 <style>
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   position: relative;
   text-align: center;
 }
 .chart {
   display: inline-block;
   margin:2px;
   width: 470px;
   height: 480px;
   border: 1px solid black;
 }

 .node {
  stroke: #000;
  stroke-opacity: .5;
  cursor: move;
 }
 .target {
   fill: #999;
   stroke: #000;
   stroke-opacity: .5;
 }

 text {
   fill: #000;
   pointer-events: none;
 }
 </style>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 </head>
 <body>
 <div id="chart1" class="chart"></div>
 <div id="chart2" class="chart"></div>
 <script>
 var Blobs = function(domid) {
   var instance = ~~(10000+Math.random()*89999);
   var obj = {};
   var w = 470,h = 480, r=20;
   var drag_offset = [0,0];
   var dragging = false;
   
   var nodes = d3.range(20).map(function(i) { return {key:instance+"_"+i,radius:r,id:i}; }),
   color = d3.scale.category10();
   
   obj.add = function(d) {
      nodes.push(d);
      force.resume();
   }
   
   var force = d3.layout.force()
      .gravity(0.05)
      .charge(function(d, i) { return -50; })
      .nodes(nodes)
      .size([w, h]);
   
   force.start();
   
   var svg = d3.select(domid).append("svg:svg")
      .attr("width", w)
      .attr("height", h);
   
   
   var node_drag = d3.behavior.drag()
      .on("dragstart", dragStart)
      .on("drag", dragMove)
      .on("dragend", dragEnd);
   
   function dragStart(d, i) {
      d.fixed = true;
      dragging = true;
      drag_offset = d3.mouse(this);
   }
   
   function dragMove(d, i) {
      d.px = d3.event.x-drag_offset[0], d.py = d3.event.y-drag_offset[1];
      force.resume();
   }
   
   function dragEnd(d, i) {
      if (Math.abs((d.x+r)-(r+10)) < r && Math.abs(d.y-(r+10)) < r) {
         d.fixed = false;
         var removed = nodes.splice(nodes.indexOf(d),1);
         if (obj.onremove) {
            obj.onremove(d);
         }
      } else {
         d.fixed = false;
      }
      dragging = false;
   }
   
   
   svg.append("circle").attr("class","target").attr("r",(r+5)).attr("cx",(r+10)).attr("cy",(r+10));
   
   function tick(e) {
      
      var nodes_select = svg.selectAll(".node_group").data(nodes,function(d){ return d.key;});
      var ng = nodes_select.enter().append("svg:g").attr("class","node_group").call(node_drag);
      
      var node = ng.append("svg:circle")
         .attr("class","node")
         .attr("cx",r)
         .attr("r", function(d) {return d.radius - 2; })
         .style("fill", function(d, i) { return color(d.id % 4); });

      var node_label = ng.append('svg:text').attr('class','node_label').attr('text-anchor','middle')
         .attr('x', r).attr('y', 0).attr('dy','0.4em');

      nodes_select.exit().remove();
      
      node.style("fill", function(d, i) { return color(d.id % 4); });
      node_label.text(function(d,i){ return d.id});
      var q = d3.geom.quadtree(nodes),
      i = 0,
      n = nodes.length;
      while (++i < n) {
         q.visit(collide(nodes[i]));
      }
      
      svg.selectAll(".node_group")
         .attr("transform",function(d){ return "translate("+d.x+","+d.y+")";});
   }
   
   force.on("tick",tick);
   
   
   function collide(node) {
      var r = node.radius + 16,
      nx1 = node.x - r,
      nx2 = node.x + r,
      ny1 = node.y - r,
      ny2 = node.y + r;
      return function(quad, x1, y1, x2, y2) {
         if (quad.point && (quad.point !== node)) {
            var x = node.x - quad.point.x,
            y = node.y - quad.point.y,
            l = Math.sqrt(x * x + y * y),
            r = node.radius + quad.point.radius;
            if (l < r) {
               l = (l - r) / l * .5;
               node.x -= x *= l;
               node.y -= y *= l;
               quad.point.x += x;
               quad.point.y += y;
            }
         }
         return x1 > nx2
         || x2 < nx1
         || y1 > ny2
         || y2 < ny1;
      };
   }
   return obj;
 };

 var b1 = Blobs("#chart1");
 var b2 = Blobs("#chart2");


 b1.onremove = function(d) {
   b2.add(d);
 }
 b2.onremove = function(d) {
   b1.add(d);
 }
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: relative;
	text-align: center;
	}
	.chart {
	display: inline-block;
	margin:2px;
	width: 470px;
	height: 480px;
	border: 1px solid black;
	}

	.node {
	stroke: #000;
	stroke-opacity: .5;
	cursor: move;
	}
	.target {
	fill: #999;
	stroke: #000;
	stroke-opacity: .5;
	}

	text {
	fill: #000;
	pointer-events: none;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<div id="chart1" class="chart"></div>
	<div id="chart2" class="chart"></div>
	<script>
	var Blobs = function(domid) {
	var instance = ~~(10000+Math.random()*89999);
	var obj = {};
	var w = 470,h = 480, r=20;
	var drag_offset = [0,0];
	var dragging = false;

	var nodes = d3.range(20).map(function(i) { return {key:instance+"_"+i,radius:r,id:i}; }),
	color = d3.scale.category10();

	obj.add = function(d) {
	nodes.push(d);
	force.resume();
	}

	var force = d3.layout.force()
	.gravity(0.05)
	.charge(function(d, i) { return -50; })
	.nodes(nodes)
	.size([w, h]);

	force.start();

	var svg = d3.select(domid).append("svg:svg")
	.attr("width", w)
	.attr("height", h);


	var node_drag = d3.behavior.drag()
	.on("dragstart", dragStart)
	.on("drag", dragMove)
	.on("dragend", dragEnd);

	function dragStart(d, i) {
	d.fixed = true;
	dragging = true;
	drag_offset = d3.mouse(this);
	}

	function dragMove(d, i) {
	d.px = d3.event.x-drag_offset[0], d.py = d3.event.y-drag_offset[1];
	force.resume();
	}

	function dragEnd(d, i) {
	if (Math.abs((d.x+r)-(r+10)) < r && Math.abs(d.y-(r+10)) < r) {
	d.fixed = false;
	var removed = nodes.splice(nodes.indexOf(d),1);
	if (obj.onremove) {
	obj.onremove(d);
	}
	} else {
	d.fixed = false;
	}
	dragging = false;
	}


	svg.append("circle").attr("class","target").attr("r",(r+5)).attr("cx",(r+10)).attr("cy",(r+10));

	function tick(e) {

	var nodes_select = svg.selectAll(".node_group").data(nodes,function(d){ return d.key;});
	var ng = nodes_select.enter().append("svg:g").attr("class","node_group").call(node_drag);

	var node = ng.append("svg:circle")
	.attr("class","node")
	.attr("cx",r)
	.attr("r", function(d) {return d.radius - 2; })
	.style("fill", function(d, i) { return color(d.id % 4); });

	var node_label = ng.append('svg:text').attr('class','node_label').attr('text-anchor','middle')
	.attr('x', r).attr('y', 0).attr('dy','0.4em');

	nodes_select.exit().remove();

	node.style("fill", function(d, i) { return color(d.id % 4); });
	node_label.text(function(d,i){ return d.id});
	var q = d3.geom.quadtree(nodes),
	i = 0,
	n = nodes.length;
	while (++i < n) {
	q.visit(collide(nodes[i]));
	}

	svg.selectAll(".node_group")
	.attr("transform",function(d){ return "translate("+d.x+","+d.y+")";});
	}

	force.on("tick",tick);


	function collide(node) {
	var r = node.radius + 16,
	nx1 = node.x - r,
	nx2 = node.x + r,
	ny1 = node.y - r,
	ny2 = node.y + r;
	return function(quad, x1, y1, x2, y2) {
	if (quad.point && (quad.point !== node)) {
	var x = node.x - quad.point.x,
	y = node.y - quad.point.y,
	l = Math.sqrt(x * x + y * y),
	r = node.radius + quad.point.radius;
	if (l < r) {
	l = (l - r) / l * .5;
	node.x -= x *= l;
	node.y -= y *= l;
	quad.point.x += x;
	quad.point.y += y;
	}
	}
	return x1 > nx2
	\|\| x2 < nx1
	\|\| y1 > ny2
	\|\| y2 < ny1;
	};
	}
	return obj;
	};

	var b1 = Blobs("#chart1");
	var b2 = Blobs("#chart2");


	b1.onremove = function(d) {
	b2.add(d);
	}
	b2.onremove = function(d) {
	b1.add(d);
	}
	</script>
	</body>
	</html>