D3js在圆上找到最近的点答案

【问题标题】：D3js find closest point on circleD3js在圆上找到最近的点
【发布时间】：2022-05-01 08:18:36
【问题描述】：

我想要实现的是获取 mousemove 事件的当前坐标并将它们与圆上最近位置的坐标相匹配。我已经设法使用 for 循环来部分工作，该循环遍历圆中的每个可能点并比较坐标以找到最近的点：

for (var i = Math.PI; i > -Math.PI; i -= 0.01) {

  // coords of current point in circle:

  var curX = Math.sin(i+Math.PI / 2)*radius + 200,
    curY = Math.sin(i)*radius + 200;

  // conditional which attempts to find the coords of the point closest to the cursor...

  if (Math.abs((x - curX)) < distanceX && Math.abs((y - curY)) < distanceY ) {
    distanceX = Math.abs((x - curX));
    distanceY = Math.abs((y - curY));

    // and then assigns the values to the newX/newY variables

    newX = curX;
    newY = curY;
  }

}

问题是这个解决方案经常会返回错误的坐标，我不知道为什么。

jsfiddle 看看我的意思：

https://jsfiddle.net/eLn4jsue/

【问题讨论】：

标签： javascript d3.js pi trigonometry

【解决方案1】：

无需循环，只需计算圆心与圆上鼠标之间的点即可。

var dx = x - 200,
    dy = y - 200,
    dist = Math.sqrt(dx*dx + dy*dy),
    newX = 200 + dx * radius / dist,
    newY = 200 + dy * radius / dist;

https://jsfiddle.net/3n0dv5v8/1/

【讨论】：