d3.js: Abstandspunkt zu Svg: Pfad

Im allgemeinen Fall glaube ich das nicht. Ein SVG-Pfad ist ein komplexes Element. Wenn der Pfad beispielsweise eine Bezier-Kurve ist, können die Kontrollpunkte außerhalb der dargestellten Linie liegen und die dargestellte Form kann außerhalb der Begrenzungsbox der Kontrollpunkte liegen.

Ich denke, wenn Sie eine Menge von Punkten haben, die Sie verwenden, um den Pfad zu generieren, können Sie diese Punkte verwenden, um die Entfernung von diesen Punkten zu einem bestimmten Punkt zu berechnen und den Mindestabstand zu erhalten. Im MDN SVG Path Tutorial finden Sie einige Beispiele für komplexe Formen und wie Sie sind gemacht.

Obwohl meine Kalkülantwort immer noch gültig ist, können Sie einfach alles in diesem bl.ocks-Beispiel eingeben:

Und ich verbrachte die ganze Zeit in der vorherigen Antwort und schrieb hübsche LaTeX!

Ich kenne keine d3-spezifische Lösung dafür. Aber wenn Ihr Weg als ein Segment einer Funktion dargestellt werden kann, gibt es Hoffnung mit ein wenig Kalkül.

1. Beginnen Sie mit der Zeilenlängengleichung .
2. Verbinden Sie Ihren Punkt mit x1 und y1.
3. Ersetzen Sie das verbleibende y durch die Funktion, die Ihren Pfad darstellt.
4. Vereinfachen Sie, und berechnen Sie dann die Ableitung .
5. Legen Sie zu 0 und lösen. Hoffentlich liegt ein x-Wert innerhalb der Grenzen Ihrer Pfad-Endpunkte. Wenden Sie dieses x auf Ihre Pfadfunktion an und Sie haben Ihren Punkt auf dem Pfad.

Ein mehr visuelles Beispiel. Es gibt viele Überlegungen, dies in JavaScript zu erreichen: Was ist meine Funktion? Was ist der schnellste Weg, um ein Derivat der oben genannten zu nehmen? Diese sind spezifisch für Ihre Situation.