stevemao/index.html

## 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(52).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(52).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>