JSFiddle - React, Tailwind, and code Playground

JavaScript

var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 500).style("border", "1px dashed");

d3.select("body").insert("div", "svg").append("button").text("Export").on("click", exportGraph);

function exportGraph() {
    var cxcy = [];
    var paths = [];

    d3.selectAll("circle").each(function () {
        cxcy.push([d3.select(this).attr("cx"), d3.select(this).attr("cy")]);
    });
    d3.selectAll("path").each(function () {
        paths.push(d3.select(this).attr("d"));
    });


    alert(cxcy + " :: " + paths);
}

svg.on("click", svgClick);


var clickState = 0;
var prevClickLoc = [0,0];

function svgClick(a, b, c) {
    
    d3.event.stopPropagation();
    var coords = d3.mouse(this);
    var x = coords[0];
    var y = coords[1];
    
    if (x > prevClickLoc[0]){
    svg.append("circle").attr("r", 5)
        .attr("cx", x)
        .attr("cy", y)
        .style("fill", "lightgreen")
        .style("stroke", "black")
        .style("stroke-width", "2px");

    if (clickState == 0) {
        prevClickLoc = coords;
        clickState = 1;
    } else if (clickState == 1) {
        svg.insert("path", "circle").attr("d", function () {
            return [
                "M", prevClickLoc[0], prevClickLoc[1],
                "L", prevClickLoc[0], y,
                "L", x, y].join(" ");
        })
            .style("stroke", "red")
            .style("stroke-width", "2px")
            .style("fill", "none");
        prevClickLoc = coords;
    }
    }
}