fix_nodes

Output/Graph/cn.js

@@ -13,6 +13,7 @@ width = svg.attr("width"),
 height = svg.attr("height");
 var textinfo='';
 var textabstract='';
+
 /**
 * creates node object and associated attributes
 */
@@ -112,7 +113,6 @@ var simulation = d3.forceSimulation()
     .force("yscale", d3.forceY().strength(1).y(function(d) {return yscale(d.group)}))
     .alpha(0.1);
 
-
 /**
 * creates group element
 */
@@ -317,6 +317,7 @@ function clickNode(node) {
 * removes the markings of the circles and their links
 */
 function clickRect() {
+    fix_nodes(node);
     d3.selectAll(".circle").style("stroke", "none")
     d3.selectAll(".link")
         .style("stroke", "#999")
@@ -360,8 +361,6 @@ function isLinkForNode(node, link){
     return link.source.index == node.index || link.target.index == node.index;
 }
 
-
-
 /**
 * outputs node info to textbox
 * @param {object} node - data of current node
@@ -375,7 +374,6 @@ function textfunc(node){
     document.getElementById('textbox').innerHTML = textinfo;
 }
 
-
 function highlightbutton(btn){
     resetbuttonhighlight();
     document.getElementById(btn).style.background="#DCDCDC";
@@ -419,6 +417,7 @@ function dragstarted(node) {
         simulation.alphaTarget(0.3).restart()
     node.fx = node.x;
     node.fy = node.y;
+    fix_nodes(node);
 }
 
 /**
@@ -438,7 +437,7 @@ function fix_nodes(this_node) {
         d.fy = d.y;
       }
     });
-  }
+}
 
 /**
 * resets the positions of the nodes

Output/Graph/index.html

@@ -27,27 +27,10 @@
         button.save{
             margin-left: 330px;
         }
-        button.abstract{
-            width:146px;
-            position:absolute;
-            top: 181px; 
-            left: 1114px;
-            border-radius:0;
-            border:1px solid #909090;
-        }
-        button.overview{
-            width:147px;
-            position:absolute;
-            display:inline-block;
-            top: 181px; 
-            left: 968px;
-            border-radius:0;
-            border:1px solid #909090;
-        }
 
         div.legendbox {
-            width:270px;
-            height:170px; 
+            width: 270px;
+            height: 170px; 
             padding: 10px;
             /*border: 1px solid #999;*/
             position: absolute; 
@@ -57,10 +40,29 @@
             margin: 0;
         }
 
-        div.textbox{
-            width:270px;
-            min-height:200px; 
-            max-height:370px;
+        button.abstract {
+            width:146px;
+            position: absolute;
+            top: 181px; 
+            left: 1114px;
+            border-radius: 0;
+            border: 1px solid #909090;
+        }
+
+        button.overview {
+            width:147px;
+            position: absolute;
+            display: inline-block;
+            top: 181px; 
+            left: 968px;
+            border-radius: 0;
+            border: 1px solid #909090;
+        }
+
+        div.textbox {
+            width: 270px;
+            min-height: 200px; 
+            max-height: 370px;
             padding: 10px;
             border: 1px solid #999;
             position: absolute; 
@@ -84,7 +86,7 @@
     <div class="legendbox"> <svg class="legendsvg"></svg></div>
 
     <!-- textbox -->
-    <div class="textbox" id = "textbox">Click node</div>
+    <div class="textbox" id="textbox">Click node</div>
    
     <!-- reset buttons -->
     <!--   <button onclick="javascript:location.reload();">Reload</button>-->
@@ -92,8 +94,8 @@
     <button class="resetZoom" onclick="resetZoom()">Reset zoom</button>
     <button class="center" onclick="center()">Center</button>
     <button class="save" onclick="savesvg()">Save</button>
-    <button id="overview" class="overview" onclick='displayabstract(false),highlightbutton("overview")'>Overview</button>
-    <button id="abstract" class="abstract" onclick='displayabstract(true),highlightbutton("abstract")'>Abstract</button>
+    <button id="overview" class="overview" onclick='displayabstract(false), highlightbutton("overview")'>Overview</button>
+    <button id="abstract" class="abstract" onclick='displayabstract(true), highlightbutton("abstract")'>Abstract</button>
   
 
     <!-- link D3 (version 5) -->