JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <h1>D3 "Semantic Zooming" grid</h1>
    <div class="intgraph" />
</div>

CSS

line.grid {
    fill: none;
    stroke: #9ecae1;
    stroke-width: 1.5px;
}
svg {
    border: solid 1px gray;
    padding:2em;
}

JavaScript

var w = 400,
    h = 400,
    gridSpacing = 10,
    vLines, 
    hLines;

/*** 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);
    
    //re-position the lines based on the zoom factors
    //the grid position (0,0) should now be positioned
    //at the coordinate in d3.event.translate
    //and all other grid positions should be adjusted by 
    //d3.event.scale    
    
    vLines.attr("x1", function(d){
            return d3.event.translate[0] + d*d3.event.scale;
        })
        .attr("y1", d3.event.translate[1])
        .attr("x2", function(d){
            return d3.event.translate[0] + d*d3.event.scale;
        })
        .attr("y2", d3.event.translate[1] + h*d3.event.scale);
        
    hLines.attr("x1", d3.event.translate[0])
        .attr("y1", function(d){
            return d3.event.translate[1] + d*d3.event.scale;
        })
        .attr("x2", d3.event.translate[0] + w*d3.event.scale)
        .attr("y2", function(d){
            return d3.event.translate[1] + d*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,...