able to zoom in out on d3

Author: mylee1995

src/app/components/Chart.jsx

@@ -35,7 +35,7 @@ class Chart extends Component {
     duration=0;
 
     var margin = {top: 20, right: 120, bottom: 20, left: 120},
-        width = 960 - margin.right - margin.left,
+        width = 800 - margin.right - margin.left,
         height = 800 - margin.top - margin.bottom;
 
     var i = 0;
@@ -49,6 +49,9 @@ class Chart extends Component {
     var svg = d3.select(this.refs.anchor).append("svg")
         .attr("width", width + margin.right + margin.left)
         .attr("height", height + margin.top + margin.bottom)
+        .call(d3.behavior.zoom().on("zoom", function () {
+            svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
+          }))
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
@@ -215,7 +218,7 @@ class Chart extends Component {
 }
 
   render() {
-    return <div ref="anchor" className="d3Container" width="100%" />;
+    return <div ref="anchor" className="d3Container" />;
   }
 }
 

src/app/styles/components/_d3Tree.scss

@@ -1,7 +1,7 @@
 .d3Container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    overflow: scroll;
+    height: 100%;
+    width: 100%;
 }
 
 .node {
@@ -12,7 +12,6 @@
     fill: #fff;
     stroke: black;
     stroke-width: 2px;
-    
 }
 
 .node text {