ForceExample3

forked from davidgutierrez's block: ForceExample

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {
  background: #eee;
}

path {
  stroke:black;
}  </style>
</head>

<body>
  <h3>D3 Force Tutorial</h3>
<div id="chart"></div>
  <script>
var nodes=[
	{name:"John", age:35, city:"Pereira"},
	{name:"Jose", age:53, city:"Bogotá"},
	{name:"Mafe", age:15, city:"Pereira"},
	{name:"Mario", age:23, city:"Bogotá"},
	{name:"Pedro", age:45, city:"Neiva"},
	{name:"Jose", age:22, city:"Neiva"},
	{name:"Karla", age:12, city:"Bogotá"}
];
var links = [
	{source:"John", target:"Mafe", weight:10},
	{source:"John", target:"Jose", weight:2},
	{source:"Jose", target:"Mario", weight:5},
	{source:"Mario", target:"Mafe", weight:8},
  {source:"Mario", target:"Karla", weight:8}
];

var width=300,
	height=300;
var svg = d3.select("#chart")
	.append("svg")
  .attr("width", width)
  .attr("height", height);
  
var rScale = d3.scaleLinear()
	.range([2, 20]);
var color = d3.scaleOrdinal(d3.schemeCategory10);  
var simulation = d3.forceSimulation()
//    .force("charge", d3.forceManyBody()
//    	.strength(-1))    
	.force("center", d3.forceCenter(width/2,height/2));

var nodesSel = svg.selectAll(".nodes")
  	.data(nodes);
    
  var nodesEnter = nodesSel.enter()
  	.append("g")
    .attr("class","nodes")
    .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));
  
  nodesEnter.append("circle")
  	.attr("r", function (d) {
    	return rScale(d.age);
    })
    .style("fill", function (d) {
    	return color(d.city);
    });
	    
	var linksSel = svg.selectAll(".links")
  	.data(links);
  
  var linksEnter = linksSel.enter()
  	.append("path")
    .attr("class","links");

update(nodes, links);

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x, d.fy = d.y;
}

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

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null, d.fy = null;
}

</script>
</body>

https://d3js.org/d3.v4.min.js