Using d3-force as layout algorithm

anvaka · Jul 6, 2016 · dd5f4aa · dd5f4aa
1 parent a21c6b5
commit dd5f4aa
Show file tree

Hide file tree

Showing 2 changed files with 148 additions and 0 deletions.
diff --git a/demos/other/d3layout/index.html b/demos/other/d3layout/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
+  <title>VivaGraph and d3 layout</title>
+  <script src='../../../dist/vivagraph.js'></script>
+  <script src="https://d3js.org/d3-collection.v1.min.js"></script>
+  <script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
+  <script src="https://d3js.org/d3-quadtree.v1.min.js"></script>
+  <script src="https://d3js.org/d3-timer.v1.min.js"></script>
+  <script src="https://d3js.org/d3-force.v1.min.js"></script>
+
+  <style type='text/css'>
+    body,
+    svg,
+    #graph-container {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      overflow: hidden;
+      margin: 0px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id='graph-container'></div>
+  <script src='index.js'></script>
+</body>
+</html>
diff --git a/demos/other/d3layout/index.js b/demos/other/d3layout/index.js
@@ -0,0 +1,117 @@
+var graphGenerator = Viva.Graph.generator();
+var graph = graphGenerator.grid(20, 20);
+
+var layout = d3Force(graph, {
+  springLength : 20,
+  springCoeff : 1,
+  gravity: -30,
+  springIterations: 10
+});
+
+var graphics = Viva.Graph.View.webglGraphics();
+
+var renderer = Viva.Graph.View.renderer(graph, {
+    layout: layout,
+    graphics: graphics,
+    renderLinks: true,
+    prerender: true
+});
+
+renderer.run();
+
+// TODO: extract into module
+function d3Force(graph, options) {
+  // todo: check input
+  var nodes = [], links = [];
+  var nodeIdToIdx = Object.create(null);
+  var linkIdToD3Link = Object.create(null);
+
+  graph.forEachNode(function(n) {
+    var index = nodes.length;
+    nodeIdToIdx[n.id] = index;
+    var node = {
+      index: index
+    }
+    nodes.push(node);
+  });
+
+  graph.forEachLink(function(l) {
+    var source = nodeIdToIdx[l.fromId];
+    var target = nodeIdToIdx[l.toId];
+
+    var index = links.length;
+    var link = {source: source, target: target, index: index}
+    links.push(link);
+    linkIdToD3Link[l.id] = link;
+  });
+
+  var simulation = d3.forceSimulation(nodes)
+      .force("charge", d3.forceManyBody().strength(options.gravity))
+      .force("link", d3.forceLink(links)
+        .strength(options.springCoeff)
+        .distance(options.springLength)
+        .iterations(options.springIterations)
+      );
+
+  simulation.stop();
+
+  return {
+    step: function() {
+      simulation.tick();
+    },
+
+    getNodePosition: getNodePosition,
+
+    getLinkPosition: function(linkId) {
+      var link = linkIdToD3Link[linkId];
+      return {
+        from: link.source,
+        to: link.target
+      };
+    },
+
+    getGraphRect: function() {
+      var minX = Number.POSITIVE_INFINITY;
+      var minY = Number.POSITIVE_INFINITY;
+      var maxX = Number.NEGATIVE_INFINITY;
+      var maxY = Number.NEGATIVE_INFINITY;
+
+      nodes.forEach(function(node) {
+        if (node.x < minX) minX = node.x;
+        if (node.x > maxX) maxX = node.x;
+
+        if (node.y < minY) minY = node.y;
+        if (node.y > maxY) maxY = node.y;
+      })
+
+      return {
+        x1: minX,
+        x2: maxX,
+        y1: minY,
+        y2: maxY
+      }
+    },
+
+    isNodePinned: function() {
+      // TODO: implement
+      return false;
+    },
+
+    pinNode: function() {
+      // TODO: implement me
+    },
+
+    dispose: function() {
+    },
+
+    setNodePosition: function(nodeId, x, y) {
+      var pos = getNodePosition(nodeId);
+      pos.x = x;
+      pos.y = y;
+    }
+  }
+
+  function getNodePosition(nodeId) {
+      return nodes[nodeIdToIdx[nodeId]];
+    }
+}