JSFiddle - React, Tailwind, and code Playground

by cloudching

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

<div id="tree-container">
  <svg id="svg" width="500" height="500">

  </svg>
</div>
<button id="zoomIn">
  Zoom In
</button>
<button id="zoomOut">
  Zoom Out
</button>

JavaScript

var svg = d3.select("#svg")

 var g = svg.append("g")
   .attr("id", "mainGroup");
 var zoom = d3.zoom()
   .scaleExtent([1 / 2, 10]);

 zoom.on("zoom", function() {
   g.attr("transform", d3.event.transform);
 });

 svg.call(zoom);

 g.append("circle")
   .attr("cx", document.body.clientWidth / 2)
   .attr("cy", document.body.clientHeight / 2)
   .attr("r", 20)
   .style("fill", "#B8DEE6")


 $("#zoomIn").click(function() {
   var translate = g;
   var transform = translate.attr('transform');
   var fixScale = {
       x: 1,
       y: 1
     },
     fixPosition = {
       x: 0,
       y: 0
     };
   var r = /^.+?\((.+?)\).+?\((.+?)\).*$/,
     m, position, scale;
   if (transform != null) {
     m = r.exec(transform);
     position = m[1].split(',');
     scale = m[2].split(',');
     fixScale.x = parseFloat(scale[0]);
     fixScale.y = parseFloat(scale[0]);
     fixPosition.x = parseFloat(position[0]);
     fixPosition.y = parseFloat(position[1]);
   }

   fixScale.x += 0.1;
   fixPosition.x -= document.body.clientWidth / 2 * 0.1;
   fixPosition.y -= document.body.clientHeight / 2 * 0.1;
   g.transition()
     .duration(300)
     .attr("transform", "translate(" + fixPosition.x + "," + fixPosition.y + ")scale(" + fixScale.x + ")");
 })
 $("#zoomOut").click(function() {
   var translate = g;
   var transform = translate.attr('transform');
   var fixScale = {
       x: 1,
       y: 1
     },
     fixPosition = {
       x: 0,
       y: 0
     };
   var r = /^.+?\((.+?)\).+?\((.+?)\).*$/,
     m, position, scale;
   if (transform != null) {
     m = r.exec(transform);
     position = m[1].split(',');
     scale = m[2].split(',');
     fixScale.x = parseFloat(scale[0]);
     fixScale.y = parseFloat(scale[0]);
     fixPosition.x = parseFloat(position[0]);
     fixPosition.y = parseFloat(position[1]);
   }

   fixScale.x -= 0.1;
   fixPosition.x += document.body.clientWidth / 2 * 0.1;
   fixPosition.y += document.body.clientHeight / 2 * 0.1;
   g.transition()
    ...