JSFiddle - React, Tailwind, and code Playground

CSS

svg {
    border: 1px solid grey;
}

line {
    stroke: steelblue;
    stroke-width: 2px;
 }

JavaScript

var line;
var points = [], g;

var vis = d3.select("body").append("svg") 
    .attr("width", 600)
    .attr("height", 400)
    .on("mousedown", mousedown)
    .on("dblclick", dblmouse);

function mousedown() {
    var m = d3.mouse(this);
    line = vis.append("line")
        .attr("x1", m[0])
        .attr("y1", m[1])
        .attr("x2", m[0])
        .attr("y2", m[1]);
    points.push(d3.mouse(this));
    //alert(m);
    vis.on("mousemove", mousemove);
}

function mousemove() {

      var m = d3.mouse(this);
      line.attr("x2", m[0])
          .attr("y2", m[1]);
   
}


function dblmouse() {
 g = vis.append('g').attr('class', 'drawPoly');
    var polyline = g.append('line').attr('points', points)
                    .style('fill', 'none');;
                   // .attr('stroke', '#000');
    for(var i = 0; i < points.length; i++) {
        g.append('circle')
        .attr('cx', points[i][0])
        .attr('cy', points[i][1])
        .attr('r', 8)
        .attr('stroke', 'blue')
        .attr('fill-opacity','0.0');
      //  .attr('stroke', '#000')
    //    .attr('is-handle', 'true')
    //    .style({cursor: 'pointer'});
    }
   vis.on("mousemove", null);
}