JSFiddle - React, Tailwind, and code Playground

by gamea12

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <svg id="visual" width="1000" height="500">
  <circle cx="40" cy="40" r="10"></circle>
  <circle cx="80" cy="80" r="10"></circle>
  <circle cx="120" cy="60" r="10"></circle></svg>

JavaScript

svg = d3.select('#visual'),
        WIDTH = 1000,
        HEIGHT = 500,
        MARGINS = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        }
var drag = d3.behavior.drag()
        .origin(function (d) {
            return this;
            //return d3.select('g').node();
        })
        .on("dragstart", dragstarter)
        .on("drag", dragmove);

function dragstarter(d) {
        //d3.select('g').node()
        //document.querySelector("#visual")

        var point = d3.mouse(d3.select('g').node()),
            tempP = {
                x: point[0],
                y: point[1]
            };

		 if (this.nodeName === "circle") {
            d3.event.sourceEvent.stopPropagation();
        } else {
            var point = d3.mouse(this);

            p = {
                x: point[0],
                y: point[1]
            };

            //remove previous rectangles
            svg.selectAll("rect").remove();


            //console.log("canv drag start " + p.x);
            selectionBox = vis.append("rect")
                .attr("x", p.x)
                .attr("y", p.y)
                .attr("width", 0)
                .attr("height", 0)
                .style("opacity", 0.5)
                .style("fill", "#03B8FC")
                .style("stroke", "#0074D3")
                .call(drag);
        }
    }


 function dragmove(d) {

       

        var barz = document.querySelector("#visual");

        var point = d3.mouse(barz),
            tempP = {
                x: point[0],
                y: point[1]
            };


        if (this.nodeName === "circle") {

            d3.event.sourceEvent.stopPropagation();

                d3.select(this).attr("transform", "translate(" + (d.x = tempP.x) + "," + (d.y = tempP.y) + ")");
            
        } else {

            selectionBox.attr({
                width: Math.abs(p.x - tempP.x),
                height: Math.abs(p.y - tempP.y)
            })

          ...