d3.jsでパスを正しく描画する方法は？

Question

赤い円をドラッグすると移動し、黒い曲線が表示されます。しかし、サークルの周りをすべて移動しようとすると、行の動作は無効になります。

緑色の円のまわりに線を描きたい。マウスの動きによりますが、もっと長いか短くする必要があります。 正しい機能を記述してください。

私のバイオリン - user3432422へhttps://jsfiddle.net/alexcat/q7qyaxqb/

var svg = d3.select('svg'); 
 
var startAngle = randomInteger(0, 120); 
 

 
makeDraggable(); 
 

 
function makeDraggable() { 
 
\t var drag = d3.behavior.drag().on("drag", circleMoving); 
 
\t 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

おかげで、私は正しい状態（ - https://jsfiddle.net/alexcat/q7qyaxqb/8/更新フィドル）を実現。

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

 
makeDraggable(); 
 

 
function makeDraggable() { 
 
\t var drag = d3.behavior.drag().on("drag", circleMoving); 
 
\t 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>