如何正确使用d3.js绘制路径？

Question

if you drag the red circle, it will move and black curved line will appear. But if try to move all around circle, line behaviour will be invalid.

I want to draw line all around green circle. Depends on mouse movements line should be more long or more short. Please help me to write correct function.

my fiddle - https://jsfiddle.net/alexcat/q7qyaxqb/

 var svg = d3.select('svg'); var startAngle = randomInteger(0, 120); 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 angle = Math.atan2(newY - mainSheduleY, newX - mainSheduleX) + Math.PI / 2; drawArcs(angle); } function drawArcs(endAngle) { d3.select("#line").remove(); var node = svg.node(); var arc = d3.svg.arc() .innerRadius(150-5) .outerRadius(150) .startAngle(startAngle * (Math.PI / 180)) //converting from degs to radians .endAngle(endAngle); //just radians svg .append("path") .attr("id", "line") .attr("d", arc) .attr("fill", "black") .attr("transform", "translate(" + node.clientWidth / 2 + "," + node.clientHeight / 2 + ")"); } function randomInteger(min, max) { var rand = min - 0.5 + Math.random() * (max - min + 1) rand = Math.round(rand); return rand; } 

 <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> 

Answer 1

Thanks to user3432422, I realized correct condition (updated fiddle - https://jsfiddle.net/alexcat/q7qyaxqb/8/ ).

 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) .attr("fill", "black") .attr("transform", "translate(" + node.clientWidth / 2 + "," + node.clientHeight / 2 + ")"); } 

 <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>