JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

CSS

line {
    stroke: red;
    stroke-width: 5px;
}

JavaScript

var line1, lineFunction;
var drag = d3.behavior.drag()    
    .on("drag", function(d){        
        var initialX1 = this.getAttribute("x1"),
        initialY1 = this.getAttribute("y1"),
        initialX2 = this.getAttribute("x2"),
        initialY2 = this.getAttribute("y2");       
        d3.select(this)
            .attr("x1", +initialX1 + d3.event.dx)
            .attr("y1", +initialY1 + d3.event.dy)
            .attr("x2", +initialX2 + d3.event.dx)
            .attr("y2", +initialY2 + d3.event.dy);        
        d3.select(line1[0][0])
        .attr('d', lineFunction([
            { 
              x: +initialX1 + d3.event.dx, 
              y: +initialY1 + d3.event.dy
            },
            {
              x: +initialX2 + d3.event.dx, 
              y: +initialY2 + d3.event.dy
            }
        ]));
    });

//line drawn as path
var svg = d3.select("body").append("svg").attr({ "width": 400, "height": 500}).style('border', 'solid 1px purple');
lineData = [ { "x": 0, "y": 0}, {"x": 0, "y": 0 } ];
lineFunction = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear");
line1 = svg.append("path")
    .attr("d", lineFunction(lineData))
    .style("stroke", "green")
    .attr("stroke-width", 5)
    .attr("fill", "none").call(drag);
var vis = d3.select("body").append("svg").attr("width", 400).attr("height", 500).style('border', 'solid 1px blue')
    .on("mousedown", mousedown)
    .on("mousemove", mousemove);
var line, isDown = false,
    lDown = false,
    isDragging = false,
    isResize = false,
    m1, m2, width = 800,
    height = 600;           
function dragmove() {
    var initialX1 = this.getAttribute("x1"),
        initialY1 = this.getAttribute("y1"),
        initialX2 = this.getAttribute("x2"),
        initialY2 = this.getAttribute("y2");
    if (isResize) {
        //console.log('isResize');
    } else {
        d3.select(this)
            .attr("x1", +initialX1 + d3.event.dx)
         ...