JSFiddle - React, Tailwind, and code Playground

by hrabinowitz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>

JavaScript

var svg = d3.select("body").append("svg")
                        .attr("width", 800)
                        .attr("height", 803);

    function moveRect() {
        d3.select(this)
                .attr('transform', 'translate(' + d3.event.x + ' ' + d3.event.y +')');
    }

                function moveCircle() {
                    d3.select(this)
                            .attr('cx', d3.event.x)
                            .attr('cy', d3.event.y);
                }

                var circle = svg.append("circle")
                        .attr("r", 40)
                        .attr("cx", 50)
                        .attr("cy", 200)
                        .style("fill", "white")
                        .style("stroke", "red")
                        .style("stroke-width", "2px")
                        .classed("baseCircle", true); // created a class to identify

                var drag = d3.behavior.drag()
                        .on("dragstart", dragstart)
                        .on("drag", drag)
                        .on("dragend", dragend);

                circle.call(drag);
                var targetCircle = circle;
                var tempCircle = circle;

                function dragstart() {
                    console.log("circle dragged is::" + d3.select(this).attr("id"));
                    if (d3.select(this).classed("baseCircle") === true) {

                        targetCircle = svg.append("circle")
                                .attr("r", 40) 
                                .attr("cx", targetCircle.attr("cx"))
                                .attr("cy", targetCircle.attr("cy"))
                                .style("fill", "white")
                                .style("stroke", "green")
                                .style("stroke-width", "2px");
                    }
                    else
                    {
                        targetCircle = d3.select(this);
                        tempCircle = this;
              ...