JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="intgraph" />
</div>

CSS

circle.node {
    stroke: #555;
    stroke-width: .5px;
}
line.link {
    fill: none;
    stroke: #9ecae1;
    stroke-width: 1.5px;
}
svg {
    border: solid 1px gray;
}

JavaScript

var w = 400,
    h = 400,
    nodeCircles,
    linkLines,
    root;

/*** Configure Force Layout ***/
var force = d3.layout.force()
    .on("tick", tick)
    .charge(function (d) {
        return d._children ? -d.size / 100 : -50;
    })
    .linkDistance(function (d) {
        return d.target._children ? 80 : 30;
    })
    .friction(0.99) //slow down by 1% each tick
    .size([w, h]);


/*** Configure zoom behaviour ***/
var zoomer = d3.behavior.zoom()
                .scaleExtent([0.1,10])
        //allow 10 times zoom in or out
                .on("zoom", zoom);
        //define the event handler function
function zoom() {
    console.log("zoom", d3.event.translate, d3.event.scale);
    vis.attr("transform", 
             "translate(" + d3.event.translate + ")" 
                + " scale(" + d3.event.scale + ")" );
}

/** Initialize SVG ***/
var graph = d3.select(".intgraph").append("svg:svg")
        .attr("width", w)
        .attr("height", h)
    .append("g")
        .attr("class", "graph")
        .call(zoomer); //Attach zoom behaviour.

// Add a transparent background rectangle to catch
// mouse events for the zoom behaviour.
// Note that the rectangle must be inside the element (graph)
// which has the zoom behaviour attached, but must be *outside*
// the group that is going to be transformed.
var rect = graph.append("rect")
    .attr("width", w)
    .attr("height", h)
    //.style("fill", "none") 
        //make transparent (vs black if commented-out)
    .style("pointer-events", "all");  
        //respond to mouse, even when transparent

var vis = graph.append("svg:g")
            .attr("class", "plotting-area");
//create a group that will hold all the content to be zoomed
/*** Initialize and position node and link elements ***/
function update() {
    var nodes = flatten(root),
        links = d3.layout.tree().links(nodes);

    // Restart the force layout.
    force.nodes(nodes)
        .links(links)
        .start();

    // Update the links…
   ...