Graph Experiments I

forked from plmrry's block: Graph Experiments I

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="800" height="500"></canvas>
<script src="https://d3js.org/d3.v4.0.0-alpha.33.min.js"></script>
<script>

var canvas = document.querySelector("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width,
    height = canvas.height;
  
var manyBody = d3
	.forceManyBody()
	.distanceMax(100)
	.theta(5);
  
var forceLink = d3
	.forceLink()
	.id(function(d) { return d.id; })

var toggle = true;
    
setInterval(function() {
  toggle = !toggle;
  if (toggle) {
    update(nodes1, links1)
  }
  else {
    update(nodes1, links2)
  }
}, 1000);
update(nodes1, links1);

simulation
  .on('tick', ticked)
	.alphaDecay(0.09)

function update(nodes, links) {
  simulation
  	.nodes(nodes)
		.force("link")
    .links(links);
  
  simulation.restart();
}
  
function ticked() {
  context.clearRect(0, 0, width, height);
  context.save();
  context.translate(width / 2, height / 2);

context.beginPath();
  simulation.force('link').links().forEach(drawLink);
  context.strokeStyle = "rgba(0,0,0,0.05)";
  context.stroke();

context.beginPath();
  simulation.nodes().forEach(drawNode);
  context.fillStyle = "rgba(0,0,0,0.5)";
  context.fill();
  context.strokeStyle = "#fff";
  context.stroke();

context.restore();
}
  
function drawLink(d) {
  context.moveTo(d.target.x, 0);
  context.lineTo(0, d.target.y);
}

function drawNode(d) {
  context.moveTo(d.x + 3, d.y);
  context.arc(d.x, d.y, 3, 0, 2 * Math.PI);
}

</script>

https://d3js.org/d3.v4.0.0-alpha.33.min.js