feat(Vis View): ✨ Working Zoom & Pan on Force Directed Graph!

SkepticMystic · Aug 5, 2021 · 0b49359 · 0b49359
1 parent 0e178f5
commit 0b49359
Showing 1 changed file with 18 additions and 0 deletions.
diff --git a/src/VisModal.ts b/src/VisModal.ts
@@ -214,6 +214,7 @@ export class VisModal extends Modal {
             )
             .strength(0.5)
         );
+
       const drag = (simulation) => {
         function dragstarted(event, d) {
           if (!event.active) simulation.alphaTarget(0.3).restart();
@@ -239,6 +240,8 @@ export class VisModal extends Modal {
           .on("end", dragended);
       };
 
+      const zoom = d3.zoom();
+
       const svg = d3
         .select(".d3-graph")
         .append("svg")
@@ -281,6 +284,21 @@ export class VisModal extends Modal {
 
         node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
       });
+
+      function zoomed({ transform }) {
+        node.attr("transform", transform);
+        link.attr("transform", transform);
+      }
+      svg.call(
+        d3
+          .zoom()
+          .extent([
+            [0, 0],
+            [width, height],
+          ])
+          .scaleExtent([1, 8])
+          .on("zoom", zoomed)
+      );
     };
 
     const forceDirectedT = (graph: Graph) => {