JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
</body

CSS

body {
                font: 13px sans-serif;
                position: relative;
                width: 960px;
                height: 500px;
            }
            
            form {
                position: absolute;
                bottom: 10px;
                left: 10px;
            }
            
            rect {
                fill: none;
                pointer-events: all;
            }
            
            circle,
            .line {
                fill: none;
                stroke: steelblue;
                stroke-width: 3.5px;
            }
            
            circle {
                fill: #fff;
                fill-opacity: .2;
                stroke-width: 1.5px;	
                cursor: move;
            }
            
            .selected {
                fill: #ff7f0e;
                stroke: #ff7f0e;
            }
            
            .highlight {
                stroke: #ff7f0e;
            }

JavaScript

var closedRoad = true;
        
        var width = 960,
            height = 500;
        
        var points = d3.range(1, 5).map(function(i) {
            return [i * width / 5, 50 + Math.random() * (height - 100)];
        });
        
        var points1 = d3.range(1, 5).map(function(i) {
            return [i * width / 5, 50 + Math.random() * (height - 100)];
        });
        
        var points2 = d3.range(1, 5).map(function(i) {
            return [i * width / 5, 50 + Math.random() * (height - 100)];
        });
        
        var count = 0;
        var ways =  [];
        
        var currentWay = null;

        var selected = null;
        
        var line = d3.svg.line();
        
        var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
        
        var rect = svg.append("rect")
        .attr("width", width)
        .attr("height", height);
        
        ways.forEach(function(way, i) {
            svg.append("path")
            .datum(way)
            .attr("id", "p" + way.id)
            .attr("class", "line")
            .call(redraw);
        });
        
        d3.select(window)
        .on("keydown", keydown)
        //.on("mousemove", mousemove)
        //.on("mouseup", mouseup)
        .on("mousedown", mousedown)
        .on("dblclick", dblclick);
        
        function redraw(way) {
            way.attr("d", function(d) { return line(d.pts); });
            
            var circle = svg.selectAll(".way" + way.data()[0].id)
            .data(way.data()[0].pts, function(d) { return d; });
            circle.enter().append("circle")
            .attr("class", "way" + way.data()[0].id)
            .attr("r", 1e-6)
            .on("mousedown", function(d) { 
                if (closedRoad) {
                    currentWay = way.data()[0];
                    selected = d; 
                    
                    if (d3.event) {
                       ...