JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <script src="d3.js" charset="utf-8"></script>
    <div id="graph"></div>
    <div id="UI">
    </div>
</body>

CSS

body {
    overflow:hidden;
}
#UI {
    width:20%;
    max-width:200px;
    right:0px;
    position:fixed;
    padding-right:1%
}
#graph {
    float:left;

JavaScript

var zoom = d3.behavior.zoom()
            .on("zoom", redraw);

function center() {
       var theGraph = d3.select("#container");
       zoom.translate([0, 0]);
       zoom.scale(1);
       theGraph.transition()
           .duration(750)
           .attr("transform", "translate(0, 0)scale(1)");
   }

   var svgWidth = 0;
   var svgHeight = 0;
   var startX = 0;
   var startY = 0;

   // code ran on load
   var svg = d3.select("#graph").append("svg").attr("id", "myGraph");
   // zoom handler
   svg.call(zoom);
   // load data & assign to graph.
   // "container" holds all the SVG paths/groups
   svg.attr("width", 500).attr("height", 500).append("g").attr("id", "container");
    var container = svg.select("#container");
    container.append("circle").attr("cx", 25).attr("cy", 25).attr("r", 25).style("fill", "purple");

    // make the button
    d3.select("#UI").append("button").attr("type","button").on("click",center).html("Center");
    container.append("circle").attr("cx",100).attr("cy",50).attr("r", 10).style("fill", "blue");


   function redraw() {
       d3.select("#container").attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
   }