D3 Examples - Graph Experiments I

xxxxxxxxxx
 
<!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 simulation = d3.forceSimulation()
    .force("charge", manyBody)
    .force("link", forceLink)
    .force("center", d3.forceCenter());
  
var n = 1000;
  
var nodes1 = d3
    .range(n)
    .map(function(d,id) { return { id: id }; });
  
var links1 = d3
    .range(n * 2)
    .map(function() {
    var source = d3.shuffle(nodes1)[0];
    var target = d3.shuffle(nodes1)[0];
    return { source: source, target: target };
  });
  
var links2 = links1.slice(n/2);
​
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>
​
    