added zoom and pan for d3 node tree graph

Author: nusanam

src/app/components/Chart.jsx

@@ -42,6 +42,12 @@ class Chart extends Component {
       .append('svg') // chartContainer is now pointing to svg
       .attr('width', width)
       .attr('height', height);
+    
+    svg.call(d3.zoom()
+      .on("zoom", function () {
+        svg.attr("transform", d3.event.transform)
+      }))
+      .append("g")
 
     let g = chartContainer
       .append("g")
@@ -116,6 +122,7 @@ class Chart extends Component {
       .on('mouseover', function (d) {
         // without JSON.stringify, data will display as object Object
         // console.log('d.data --> ', JSON.stringify(d.data))
+        let displayedState;
         tip.show(JSON.stringify(d.data.stateSnapshot), this)
       })
       .on('mouseout', tip.hide)

src/app/styles/components/d3graph.css

@@ -4,6 +4,10 @@ body {
   background-color: black;
 }
 
+.node {
+  cursor: pointer;
+}
+
 /*   this represents leaf nodes aka nodes with no children */
 .node circle {
   fill: #5249f7;
@@ -45,16 +49,17 @@ body {
   color: #320a5c;
   border-radius: 4px;
   font-size: 15px;
-  width: 200px;
+  width: 300px;
+  overflow-wrap: break-word;
   font-family: "Overpass Mono", monospace;
 }
 
 /* Creates a small triangle extender for the tooltip */
 .d3-tip:after {
   box-sizing: border-box;
-  /* display: inline; */
+  display: inline;
   font-size: 15px;
-  width: 200px;
+  width: 100%;
   line-height: 1;
   color: #9cf4df;
   content: "\25BC";