11_05_index_Ansatz_1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Force Tutorial</title>
</head>
<body>

<h1>Force Tutorial</h1>
<canvas id="network" width="500" height="500"></canvas>

<script src="https://d3js.org/d3.v4.min.js"></script>

<script>
/* global d3 */


var canvas = d3.select("#network"),
  width = canvas.attr("width"),
  height = canvas.attr("height"),
  ctx = canvas.node().getContext("2d"),
  r = 10,
  color = d3.scaleOrdinal(d3.schemeCategory20),
  x=d3.scaleOrdinal().range([20,width-20]),


  simulation = d3.forceSimulation()
    .force("x", d3.forceX(function(d){ return x(d.input);}).strength(0.05))
    .force("y", d3.forceY(height/2))
    .force("collide", d3.forceCollide(r+10))
    .force("charge", d3.forceManyBody()
      .strength(-20))
    .force("link", d3.forceLink().strength(0.1)
      .id(function (d) { return d.doi; }));


d3.json("data.json", function (err, graph) {
  if (err) throw err;

  simulation.nodes(graph.nodes);
  simulation.force("link")
    .links(graph.links);
  simulation.on("tick", update);


  function update() {
      ctx.lineWidth=3;

    ctx.clearRect(0, 0, width, height);

    ctx.beginPath();
    ctx.globalAlpha = 0.5;
    ctx.strokeStyle = "#a";
    graph.links.forEach(drawLink);
    ctx.stroke();


    ctx.globalAlpha = 1.0;
    graph.nodes.forEach(drawNode);
  }


});


function drawNode(d) {
    ctx.lineWidth=3;
  ctx.beginPath();
  ctx.fillStyle = color(d.input);
  ctx.moveTo(d.x, d.y);
  ctx.arc(d.x, d.y, r, 0, Math.PI*2);
  ctx.fill();
}

function drawLink(l) {
  //ctx.moveTo(l.source.x, l.source.y);
  //ctx.lineTo(l.target.x, l.target.y);
  canvas_arrow(ctx,l.source.x,l.source.y,l.target.x,l.target.y);
}

function canvas_arrow(context, fromx, fromy, tox, toy) {
  context.lineWidth=3;
  var headlen = 10; // length of head in pixels
  var dx = tox - fromx;
  var dy = toy - fromy;
  var angle = Math.atan2(dy, dx);
  context.moveTo(fromx, fromy);
  context.lineTo(tox, toy);
  context.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
  context.moveTo(tox, toy);
  context.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
}


</script>

</body>
</html>