d3.js：到svg的距离点：路径

是否有（有效的）方法来（a）计算d3.js中固定点和svg:path元素之间的最短距离，以及（b）确定路径上属于该距离的点？

在一般情况下，我不这么认为。SVG路径是一个复杂的元素。例如，如果路径是贝塞尔曲线，则控制点可能脱离表示的线，而表示的形状可能脱离控制点的边界框

---

我认为，如果你有一组用来生成路径的点，你可以用这些点来计算从这些点到给定点的距离，得到最小距离。在中，您可以找到一些复杂形状的示例以及它们是如何制作的。

我不知道d3的具体解决方案。但是，如果您的路径可以表示为函数的一段，那么通过一些微积分就有希望了

从直线长度方程开始

将点插入x1和y1

用表示路径的函数替换剩余的y

简化，然后计算导数

设置为0并求解。希望一个x值在路径端点的范围内。将此x应用于路径函数，您的点位于路径上

---

要在JavaScript中实现这一点，需要考虑很多因素：我的函数是什么？取上述导数的最快方法是什么？这些都是特定于您的情况。

虽然我的微积分答案仍然有效，但您可以：

var points=[[474276]、[586393]、[378388]、[338323]、[341138]、[547252]、[589148]、[346227]、[365108]、[562,62]；
可变宽度=960，
高度=500；
var line=d3.svg.line（）
.插入（“基数”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var path=svg.append（“路径”）
.基准（点）
.attr（“d”，行）；
var line=svg.append（“line”）；
var circle=svg.append（“circle”）
.attr（“cx”，-10）
.attr（“cy”，-10）
.attr（“r”，3.5）；
svg.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.on（“mousemove”，mousemoved）；
函数mousemoved（）{
var m=d3.鼠标（此），
p=闭合点（path.node（），m）；
行属性（x1，p[0]）。属性（y1，p[1]）。属性（x2，m[0]）。属性（y2，m[1]）；
圆.attr（“cx”，p[0]）.attr（“cy”，p[1]）；
}
函数闭合点（路径节点，点）{
var pathLength=pathNode.getTotalLength（），
精度=路径长度/pathNode.pathSegList.numberOfItems*.125，
最好的，
最佳长度，
最佳距离=无穷大；
//粗近似线性扫描
对于（变量扫描，扫描长度=0，扫描距离；扫描长度.5）{
var之前，
之后
在长度之前，
后程，
在距离之前，
后距；
如果（（beforeLength=bestLength-precision）>=0&&（beforeDistance=distance2（before=pathNode.getPointAtLength（beforeLength））