ing

src/app/pages/home/home-page.component.html

@@ -26,7 +26,7 @@
         <line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
       </g>
       <g *ngFor="let node of nodes">
-        <g [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)">
+        <g class="node-container" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'" (click)="onTargetClick(node)">
           <circle class="node" cx="0" cy="0" r="33" fill="url(#icon_db_mria)"></circle>
           <text class="textClass" y="2.5em" text-anchor="middle">{{node.id}}</text>
         </g>

src/app/pages/home/home-page.component.ts

@@ -165,6 +165,35 @@ export class HomePageComponent implements OnInit, OnDestroy {
 
   simulationRestart() {
     // Update and restart the simulation.
+    const __this = this;
+
+    function started(node: Node) {
+      /** Preventing propagation of dragstart to parent elements */
+      d3.event.sourceEvent.stopPropagation();
+
+      if (!d3.event.active) {
+        __this.simulation.alphaTarget(0.3).restart();
+      }
+
+      d3.event.on('drag', dragged).on('end', ended);
+
+      function dragged() {
+        node.fx = d3.event.x;
+        node.fy = d3.event.y;
+      }
+
+      function ended() {
+        if (!d3.event.active) {
+          __this.simulation.alphaTarget(0);
+        }
+
+        node.fx = null;
+        node.fy = null;
+      }
+    }
+
+    d3.select(this.discoveryTargetRef.nativeElement).selectAll('.node-container').call(d3.drag().on('start', started));
+
     this.simulation
       .nodes(this.nodes)
       .force('link', d3.forceLink(this.links).distance(150))