Question

如果拖动红色圆圈，它将移动并出现黑色曲线。但如果试图四处移动，则线条行为将无效。

我想在绿色圆圈周围绘制线条。取决于鼠标移动线应该更长或更短。请帮我写出正确的功能。

我的小提琴 - https://jsfiddle.net/alexcat/q7qyaxqb/

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

1 个答案: