JSFiddle - React, Tailwind, and code Playground

by alexcat

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>

<svg width="600" height="600">
  <circle cx="300" cy="300" r="150" fill="green"></circle>
  <circle id="circle1" cx="450" cy="300" r="20" fill="red"></circle>
</svg>

JavaScript

var svg = d3.select('svg');

makeDraggable();

function makeDraggable () {
	var drag = d3.behavior.drag().on("drag", circleMoving);
	d3.select("#circle1").call(drag);
}

function circleMoving () {
                    var coords = d3.mouse(this);
                    var coordX = coords[0];
                    var coordY = coords[1];

                    var mainSheduleX = 300;
                    var mainSheduleY = 300;
                    var mainSheduleRadius = 150;

                    var hypotenuse = Math.sqrt((coordX - mainSheduleX) * (coordX - mainSheduleX) + (coordY - mainSheduleY) * (coordY - mainSheduleY));

                    var cosf = (coordX - mainSheduleX) / hypotenuse;
                    var sinf = (coordY - mainSheduleY) / hypotenuse;

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

                    var newX = mainSheduleRadius * cosf + parseInt(mainSheduleX);
                    var newY = (mainSheduleRadius * sinf + parseInt(mainSheduleY));

                    d3.select(this)
                        .attr('cx', newX)
                        .attr('cy', newY);

                    var startAngle = 60 * (Math.PI / 180);
                    var endAngle = Math.atan2(newY - mainSheduleY, newX - mainSheduleX) + Math.PI / 2;
                    
                    if (endAngle < startAngle) {
                        endAngle += 2 * Math.PI;
                    }

                    drawArcs(startAngle, endAngle);
}

function drawArcs(startAngle, endAngle) {
            d3.select("#line").remove();

var node = svg.node();
            var arc = d3.svg.arc()
                .innerRadius(150-5)
                .outerRadius(150)
                .startAngle(startAngle) //converting from degs to radians
                .endAngle(endAngle); //just radians

            svg  
                .append("path")
                .attr("id", "line")
                .attr("d", arc)
               ...