rsk2327 · September 25, 2016 10:18
diff --git a/index.html b/index.html
 <html>
 <head>
 <title>collisionForce</title>
 <script type="text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
 <style  type = "text/css">
 .active {
  stroke: #000;
  stroke-width: 2px;
 }

 .links line {
  stroke: #aaa;
 }

 .nodes circle {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
 }

 </style>

 </head>
 <body>
 <script>
  

  var width = 1000,
    height = 600;

 var svg = d3.select("body").append("svg").attr("width",width)
            .attr("height",height);

 var nodeData = [{'x':100,'y':100,'r':10},
 {'x':200,'y':100,'r':10},
 {'x':50,'y':200,'r':10},
 {'x':350,'y':200,'r':10},
 {'x':100,'y':300,'r':10},
 {'x':300,'y':300,'r':10},
 {'x':300,'y':250,'r':10},];
 
 var attractForce = d3.forceManyBody().strength(80).distanceMax(400).distanceMin(80);
 var collisionForce = d3.forceCollide(12).strength(1).iterations(100);

 var simulation = d3.forceSimulation(nodeData).alphaDecay(0.01).force("attractForce",attractForce).force("collisionForce",collisionForce);

          

 var node = svg.selectAll("circle").data(nodeData)
            .enter().append("circle")
            .attr("r",function(d){ return d.r;}).attr("cx",function(d){ return d.x;}).attr("cy",function(d){ return d.y;})
            .attr("fill","black").attr("opacity",0.5)
            .call(d3.drag()
            .on("start",dragstarted)
            .on("drag",dragged)
            .on("end",dragended));
 
 function dragstarted(d)
 { 
    simulation.restart();
    simulation.alpha(0.7);
    d.fx = d.x;
    d.fy = d.y;
 }

 function dragged(d)
 {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
 }

 function dragended(d)
 {
    d.fx = null;
    d.fy = null;
    simulation.alphaTarget(0.1);
 }

 function ticked(){
     node.attr("cx", function(d){ return d.x;})
         .attr("cy", function(d){ return d.y;})
 }

 simulation.on("tick",ticked);


  
 </script>


 </body>
 </html>
	<html>
	<head>
	<title>collisionForce</title>
	<script type="text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
	<style type = "text/css">
	.active {
	stroke: #000;
	stroke-width: 2px;
	}

	.links line {
	stroke: #aaa;
	}

	.nodes circle {
	pointer-events: all;
	stroke: none;
	stroke-width: 40px;
	}

	</style>

	</head>
	<body>
	<script>


	var width = 1000,
	height = 600;

	var svg = d3.select("body").append("svg").attr("width",width)
	.attr("height",height);

	var nodeData = [{'x':100,'y':100,'r':10},
	{'x':200,'y':100,'r':10},
	{'x':50,'y':200,'r':10},
	{'x':350,'y':200,'r':10},
	{'x':100,'y':300,'r':10},
	{'x':300,'y':300,'r':10},
	{'x':300,'y':250,'r':10},];

	var attractForce = d3.forceManyBody().strength(80).distanceMax(400).distanceMin(80);
	var collisionForce = d3.forceCollide(12).strength(1).iterations(100);

	var simulation = d3.forceSimulation(nodeData).alphaDecay(0.01).force("attractForce",attractForce).force("collisionForce",collisionForce);



	var node = svg.selectAll("circle").data(nodeData)
	.enter().append("circle")
	.attr("r",function(d){ return d.r;}).attr("cx",function(d){ return d.x;}).attr("cy",function(d){ return d.y;})
	.attr("fill","black").attr("opacity",0.5)
	.call(d3.drag()
	.on("start",dragstarted)
	.on("drag",dragged)
	.on("end",dragended));

	function dragstarted(d)
	{
	simulation.restart();
	simulation.alpha(0.7);
	d.fx = d.x;
	d.fy = d.y;
	}

	function dragged(d)
	{
	d.fx = d3.event.x;
	d.fy = d3.event.y;
	}

	function dragended(d)
	{
	d.fx = null;
	d.fy = null;
	simulation.alphaTarget(0.1);
	}

	function ticked(){
	node.attr("cx", function(d){ return d.x;})
	.attr("cy", function(d){ return d.y;})
	}

	simulation.on("tick",ticked);



	</script>


	</body>
	</html>