如何正確使用d3.js繪制路徑？

Question

如果拖動紅色圓圈，它將移動並出現黑色曲線。 但是，如果嘗試繞圓移動，則線的行為將無效。

我想在綠色圓圈周圍畫一條線。 取決於鼠標的動作線應該更長或更短。 請幫我寫正確的功能。

我的小提琴-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

由於user3432422，我意識到正確的狀態（更新小提琴- 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>