JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>D3 with TypeScript</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>

  <svg style="height: 600px; width: 800px; background-color: rgb(242, 242, 242);" class="rootSVG"><g class="treeGroup" transform="translate(0,0) scale(1.6285714285714286)"><path class="link" fill="none" stroke="#ccc" stroke-width="3" d="M0,175C90,175,90,17.5,180,17.5" stroke-dasharray="252.22108459472656 252.22108459472656" stroke-dashoffset="0"><title>flare -&gt; analytics</title></path><path class="link" fill="none" stroke="#ccc" stroke-width="3" d="M0,175C90,175,90,52.5,180,52.5" stroke-dasharray="227.78880310058594 227.78880310058594" stroke-dashoffset="0"><title>flare -&gt; animate</title></path><path class="link" fill="none" stroke="#ccc" stroke-width="3" d="M0,175C90,175,90,87.5,180,87.5" stroke-dasharray="206.6194305419922 206.6194305419922" stroke-dashoffset="0"><title>flare -&gt; data</title></path><path class="link" fill="none" stroke="#ccc" stroke-width="3" d="M0,175C90,175,90,122.5,180,122.5" stroke-dasharray="190.34071350097656 190.34071350097656" stroke-dashoffset="0"><title>flare -&gt; display</title></path><path class="link" fill="none" stroke="#ccc" stroke-width="3" d="M0,175C90,175,90,157.5,180,157.5" stroke-dasharray="181.2042236328125 181.2042236328125" stroke-dashoffset="0"><title>flare -&gt; flex</title></path><path class="link" fill="none" stroke="#ccc" stroke-width="3" d="M0,175C90,175,90,192.5,180,192.5" stroke-dasharray="181.2042236328125 181.2042236328125" stroke-dashoffset="0"><title>flare -&gt; physics</title></path><path class="link" fill="none" stroke="#ccc" stroke-width="3" d="M0,175C90,175,90,227.5,180,227.5" stroke-dasharray="190.34071350097656 190.34071350097656" stroke-dashoffset="0"><title>flare -&gt;...

JavaScript

var treeGroup = d3.select('.treeGroup');
var rootSVG = d3.select('.rootSVG')
var zoom = d3.zoom()
.scaleExtent([1.6285, 3])
.translateExtent([[0, 0],[800, 600]])
.on('zoom', function(){
	treeGroup.attr('transform', d3.event.transform);
})

rootSVG.call(zoom);

// treeGroup.attr('transform', 'translate(10, 10)');