simulation prerendering is now a config var

graph.js

@@ -3,6 +3,7 @@ const CONFIG = {
     'nodeSize': 16,
     'baseUrl': 'https://www.securityvision.io/wiki/index.php/',
     'dataUrl': 'semantic_data.json',
+    'preSimulate': true, // run simulation before starting, so we don't start with lines jumping around
     'labels': {
         'rotate': true,
     },
@@ -84,7 +85,7 @@ function splitText(text) {
 };
 
 function getTitle(obj) {
-    if(obj.parent) {
+    if (obj.parent) {
         return "sub of " + obj.parent.split('#', 1)[0].replace(/_/g, " ")
     }
     return obj['@id'].split('#', 1)[0].replace(/_/g, " ")
@@ -129,11 +130,11 @@ function buildGraph(data) {
             .iterations(2) // increase to make more rigid
         )
         .force("charge", d3.forceManyBody()
-            .strength(-50)
+            .strength(-40)
         )
         .force("center", d3.forceCenter(width / 2, height / 2))
         .force("collision", d3.forceCollide(function (d) {
-          return getSizeForNode(d) * 1.5; // avoid overlapping nodes
+            return getSizeForNode(d) * 1.5; // avoid overlapping nodes
         }));
 
     const svg = d3.select("svg")
@@ -151,7 +152,7 @@ function buildGraph(data) {
         .append("line").
         attr("marker-end", "url(#arrowHead)");
     const linkText = link.append("text").text(function (l) {
-      return l.name;
+        return l.name;
     });
 
     const node = container.append("g")
@@ -211,14 +212,14 @@ function buildGraph(data) {
 
 
         data.nodes.forEach(function (d, idx) {
-          d.leftX = d.rightX = d.x;
+            d.leftX = d.rightX = d.x;
 
-          // fix first node on center
+            // fix first node on center
-          //             if(idx === 0) {
+            //             if(idx === 0) {
-          //               d.fx = width/2;
+            //               d.fx = width/2;
-          //               d.fy = height/2;
+            //               d.fy = height/2;
-          //               return;
+            //               return;
-          // }
+            // }
         });
         link
             .attr("x1", d => d.source.x)
@@ -227,72 +228,72 @@ function buildGraph(data) {
             .attr("y2", d => d.target.y);
 
         linkLine.each(function (d) {
-          var sourceX, targetX, midX, dx, dy, angle;
+            var sourceX, targetX, midX, dx, dy, angle;
 
-          // This mess makes the arrows exactly perfect.
+            // This mess makes the arrows exactly perfect.
-          // thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
+            // thanks to http://bl.ocks.org/curran/9b73eb564c1c8a3d8f3ab207de364bf4
-          if (d.source.x < d.target.x) {
+            if (d.source.x < d.target.x) {
-            sourceX = d.source.x;
+                sourceX = d.source.x;
-            targetX = d.target.x;
+                targetX = d.target.x;
-          } else if (d.target.x < d.source.x) {
+            } else if (d.target.x < d.source.x) {
-            targetX = d.target.x;
+                targetX = d.target.x;
-            sourceX = d.source.x;
+                sourceX = d.source.x;
-          } else if (d.target.isCircle) {
+            } else if (d.target.isCircle) {
-            targetX = sourceX = d.target.x;
+                targetX = sourceX = d.target.x;
-          } else if (d.source.isCircle) {
+            } else if (d.source.isCircle) {
-            targetX = sourceX = d.source.x;
+                targetX = sourceX = d.source.x;
-          } else {
+            } else {
-            midX = (d.source.x + d.target.x) / 2;
+                midX = (d.source.x + d.target.x) / 2;
-            if (midX > d.target.x) {
+                if (midX > d.target.x) {
-              midX = d.target.x;
+                    midX = d.target.x;
-            } else if (midX > d.source.x) {
+                } else if (midX > d.source.x) {
-              midX = d.source.x;
+                    midX = d.source.x;
-            } else if (midX < d.target.x) {
+                } else if (midX < d.target.x) {
-              midX = d.target.x;
+                    midX = d.target.x;
-            } else if (midX < d.source.x) {
+                } else if (midX < d.source.x) {
-              midX = d.source.x;
+                    midX = d.source.x;
+                }
+                targetX = sourceX = midX;
             }
-            targetX = sourceX = midX;
-          }
 
-          dx = targetX - sourceX;
+            dx = targetX - sourceX;
-          dy = d.target.y - d.source.y;
+            dy = d.target.y - d.source.y;
-          angle = Math.atan2(dx, dy);
+            angle = Math.atan2(dx, dy);
 
-          /* DISABLED
+            /* DISABLED
-          srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
+            srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize;
-          tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
+            tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize;
-          */
+            */
-          var srcSize = getSizeForNode(d.source);
+            var srcSize = getSizeForNode(d.source);
-          var tgtSize = getSizeForNode(d.target);
+            var tgtSize = getSizeForNode(d.target);
 
-          // Compute the line endpoint such that the arrow
+            // Compute the line endpoint such that the arrow
-          // is touching the edge of the node rectangle perfectly.
+            // is touching the edge of the node rectangle perfectly.
-          d.sourceX = sourceX + Math.sin(angle) * srcSize;
+            d.sourceX = sourceX + Math.sin(angle) * srcSize;
-          d.targetX = targetX - Math.sin(angle) * tgtSize;
+            d.targetX = targetX - Math.sin(angle) * tgtSize;
-          d.sourceY = d.source.y + Math.cos(angle) * srcSize;
+            d.sourceY = d.source.y + Math.cos(angle) * srcSize;
-          d.targetY = d.target.y - Math.cos(angle) * tgtSize;
+            d.targetY = d.target.y - Math.cos(angle) * tgtSize;
         }).attr("x1", function (d) {
-          return d.sourceX;
+            return d.sourceX;
         }).attr("y1", function (d) {
-          return d.sourceY;
+            return d.sourceY;
         }).attr("x2", function (d) {
-          return d.targetX;
+            return d.targetX;
         }).attr("y2", function (d) {
-          return d.targetY;
+            return d.targetY;
         });
         linkText.attr("transform", function (d) {
-          const dx = (d.target.x - d.source.x) / 2;
+            const dx = (d.target.x - d.source.x) / 2;
-          const dy = (d.target.y - d.source.y) / 2;
+            const dy = (d.target.y - d.source.y) / 2;
-          const x = d.source.x + dx;
+            const x = d.source.x + dx;
-          const y = d.source.y + dy;
+            const y = d.source.y + dy;
-          const deg = Math.atan(dy / dx) * 180 / Math.PI;
+            const deg = Math.atan(dy / dx) * 180 / Math.PI;
-          // if dx/dy == 0/0 -> deg == NaN
+            // if dx/dy == 0/0 -> deg == NaN
-          if (isNaN(deg)) {
+            if (isNaN(deg)) {
-            return "";
+                return "";
-          }
+            }
-        // return "";
+            // return "";
-          return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")";
+            return "translate(" + x + " " + y + ") rotate(" + (CONFIG.labels.rotate ? deg : 0) + ")";
         });
 
         node
@@ -300,6 +301,15 @@ function buildGraph(data) {
     });
 
 
+
+    // simulate the first bit without drawing, so we don't have the 'jumping' graph in the beginning
+    if (CONFIG.preSimulate) {
+        for (var i = 0, n = Math.ceil(Math.log(simulation.alphaMin()) / Math.log(1 - simulation.alphaDecay())); i < n; ++i) {
+            simulation.tick();
+        }
+    }
+
+
     return svg.node();
 }
 
@@ -333,7 +343,7 @@ const drag = simulation => {
         .on("end", dragended);
 };
 
-function selectNode(evt, node, d3Node){
+function selectNode(evt, node, d3Node) {
     console.log(evt, node, d3Node);
     document.querySelectorAll('svg .node').forEach(n => n.classList.remove('selected'));
     d3Node._groups[0][node.index].classList.add('selected');
@@ -344,9 +354,9 @@ function selectNode(evt, node, d3Node){
     const url = getUrl(node);
     const hrefEl = infoEl.querySelector('.nodeHref');
     hrefEl.textContent = getTitle(node);
-    hrefEl.setAttribute('href',url);
+    hrefEl.setAttribute('href', url);
     infoEl.querySelector('.nodeContents').src = url;
-    
+
 }
 
 document.getElementById('closeInfo').addEventListener('click', (evt) => {